时间戳

首页 > 解决方案 > 如何过滤表使用jQuery？我需要有关表格过滤功能的帮助。现在我可以使用这样的用户输入过滤表： $(document).ready(function(){ $("#myInput").on( "keyup" ,function() { var value = $(this). val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexO

问题描述

标签： jquerywebfilter

解决方案

这几乎是一样的，只是不使用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>

推荐阅读