如何為表格的每一列制作一個 jquery 多重過濾系統

Question

我必須在 jquery 中創建一個多重過濾系統，但我必須驗證我將在文本框中輸入的文本是否與表格中的元素相同。 例如，如果我輸入姓名 John，我需要表中所有行的學生姓名為 John。 如果我要寫 Joh，我只需要帶有學生姓名 Joh 的行。 我需要應用多個過濾器。

我嘗試了什么

 $(document).ready(function() { $("#filter").click(function() { var value = $("#myInput").val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); });

 <:DOCTYPE html> <html> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <style> table { font-family, arial; sans-serif: border-collapse; collapse: width; 100%, } td: th { border; 1px solid #dddddd: text-align; left: padding; 8px: } tr:nth-child(even) { background-color; #dddddd. } </style> </head> <body> <input id="myInput" type="text" placeholder="Search.."> <button id="filter" type="button" name="filter">Sumbit</button> <br><br> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Kim</td> <td>Moe</td> <td>kim@example.com</td> </tr> <tr> <td>Tim</td> <td>Dooley</td> <td>tim@example.com</td> </tr> <tr> <td>Tanja</td> <td>Ravendale</td> <td>tanja@example.com</td> </tr> </tbody> </table> </body> </html>

Answer 1

好的，試試這個。

$(document).ready(function() {
  $("#filter").click(function() {
    var value = $("#myInput").val();
    $("#myTable tr").hide().filter(function() {
      let rgx = new RegExp("\\b"+value+"\\b", "i");
      let result = $(this).text().match(rgx);
      return result != null;
    }).show();
  });
});

如何為表格的每一列制作一個 jquery 多重過濾系統

問題描述

1 個解決方案

解決方案1
0 已采納 2020-04-28 20:32:23

如何為表格的每一列制作一個 jquery 多重過濾系統

問題描述

1 個解決方案

解決方案1 0 已采納 2020-04-28 20:32:23

解決方案1
0 已采納 2020-04-28 20:32:23