Question

我需要有关表格过滤功能的帮助。现在，我可以使用“用户”输入来过滤表，如下所示： $（document）.ready（function（）{ $（“＃myInput”）。on（“ keyup”，function（）{ var value = $（this）.val（）。toLowerCase（）; $（“＃myTable tr”）。filter（function（）{ $（this）.toggle（$（this）.text（）。toLowerCase（）。indexOf（value）> -1） }）; }）; }）; 这也很好用，但是如何通过选择的用户来过滤表。因此，用户可以选择一个选项：在他选择了某些内容之后，我将对此进行过滤。该表可能如下所示：表{ 字体家族：arial，sans-serif; 边界崩溃：崩溃；宽度：100％; } td，th { 边框：1px实心#dddddd; 文字对齐：左；填充：8px; } tr：nth-child（even）{ 背景颜色：#dddddd; } <表格> <头> 日志 dafsdfkj错误sdfkjlsdafj dsafjk Waring dfadf adf 求助<3

Answer 1

除了使用keyup而不是使用change事件以外，几乎是相同的。

此外，您应该使用.each()而不是filter()，因为您不会在任何地方返回该值。

您需要将选项的值设置为您希望它们匹配的值，而不是error。

$("#myInput").on("change", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").each(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="Filter" id="myInput">
  <option id="myInput" value="john">John</option>
  <option id="myInput" value="warning">Warning</option>
</select>
<table>
  <thead>
    <tr>
      <th>Log</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

    </tr>
    <tr>
      <td>Warning dfadf adf</td>
    </tr>
    <tr>
      <td>John did it</td>
    </tr>
  </tbody>
</table>

Answer 2

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

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="Filter" id="myInput">
   <option   value="">All</option>
   <option   value="John">John</option>
   <option  value="Warning">Warning</option>
</select>
<table>
  <thead>
    <tr>
      <th>Log</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

    </tr>
    <tr>
      <td>Warning dfadf adf</td>
    </tr>
     <tr>
      <td>John did it</td>
    </tr>
 </tbody>
</table>

如何使用JQuery使用<select>过滤表？

2 个答案: