Question

我目前正在使用jQuery过滤表。此表与成千上万个其他已过滤表之间的主要区别在于，这是输入表。我需要过滤每个单元格中输入的值，而不是文本值。这是我的页面的大致概图，其中删除了无关的详细信息：

  $(document).ready(function(){
    $("#search").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#usertable tbody tr td input").filter($(this)).parent().parent().toggle($(this).val().toLowerCase.indexOf(value) > -1)
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="search" placeholder="Search...">
    <table>
    <tbody>
    <tr>
    <th>First</th>
    <th>Last</th>
    <th>Email</th>
    </tr>
    <tr>
    <td><input value="Steve" /></td>
    <td><input value="Doe" /></td>
    <td><input value="sdoe@example.com" /></td>
    </tr>
    <tr>
    <td><input value="Billy" /></td>
    <td><input value="Bob" /></td>
    <td><input value="bbob@example.com" /></td>
    </tr>
    </tbody>
    </table>

我知道这段代码在某种程度上可能存在根本性的缺陷，因为我对jQuery相当陌生，但是如果您花时间回答，我感谢您的耐心等待。

Answer 1

您必须遍历每个tr，并检查是否在任何输入中都找到了搜索input值。

这是一种方法：

notFoundCount被分配了列数。这是负面的，因为我们要累加indexOf。如果等于-3（每列-1），则没有匹配项。以后用于检查found是否大于-3。如果是这样，则存在匹配项，我们show tr，否则我们hide匹配。

$tr包含要循环的所有tr元素。

$(document).ready(function(){
    var notFoundCount = -3;
    $("#search").on("keyup", function() {
      var value = $(this).val().toLowerCase(),
         $tr =  $("#usertable tbody tr");
      $tr.each(function(){
        var found = 0;
        $(this).find("input").each(function(){
           found += $(this).val().toLowerCase().indexOf(value)
        });
        if (found > notFoundCount){
            $(this).closest('tr').show();
        }else{
            $(this).closest('tr').hide();
        }
      });
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="search" placeholder="Search...">
    <table id="usertable"> 
    <tbody>
    <tr>
    <th>First</th>
    <th>Last</th>
    <th>Email</th>
    </tr>
    <tr>
    <td><input value="Steve" /></td>
    <td><input value="Doe" /></td>
    <td><input value="sdoe@example.com" /></td>
    </tr>
    <tr>
    <td><input value="Billy" /></td>
    <td><input value="Bob" /></td>
    <td><input value="bbob@example.com" /></td>
    </tr>
    </tbody>
    </table>

通过输入值搜索表

1 个答案: