add and search record done

2019-01-02 13:23:07 +01:00
parent 50705e1234
commit f99073eedd
5 changed files with 164 additions and 38 deletions
--- a/index.php
+++ b/index.php
@@ -25,7 +25,7 @@ $reponse = $bdd->query('SELECT * FROM projetphp');
  <link rel="stylesheet" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
  <script src="script.js?<?php echo date('l jS \of F Y h:i:s A'); ?>"></script>
 </head>
-
+<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
 <body>
  <table id="allRecord">
    <thead>
@@ -62,6 +62,7 @@ while ($data = $reponse->fetch()) {
      </tr>
      <?php
 }
+$reponse->closeCursor();
 ?>
      <tr rowspan="2">
        <td colspan="6" style="text-align:center"><i class="fas fa-user-plus fa-4x click"></i></td>
@@ -69,5 +70,28 @@ while ($data = $reponse->fetch()) {
    </tbody>
  </table>
 </body>
+<script>
+//https://www.w3schools.com/howto/howto_js_filter_table.asp
+function myFunction() {
+  // Declare variables
+  var input, filter, table, tr, td, i, txtValue;
+  input = document.getElementById("myInput");
+  filter = input.value.toUpperCase();
+  table = document.getElementById("allRecord");
+  tr = table.getElementsByTagName("tr");

+  // Loop through all table rows, and hide those who don't match the search query
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByTagName("td")[0];
+    if (td) {
+      txtValue = td.textContent || td.innerText;
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  }
+}
+</script>
 </html>