时间戳

首页 > 解决方案 > 使用 jQuery .filter() 按行过滤表中的文本，不包括特定列

jquery - 使用 jQuery .filter() 按行过滤表中的文本，不包括特定列

问题描述

我有一张像

<input id="searchText" type="text" placeholder="Search...">
<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody id="tableData">
        <tr>
            <td class="action">Action</td>
            <td>something 1</td>
            <td>something 2</td>
        </tr>
        <tr>
            <td class="action">Action</td>
            <td>else 1</td>
            <td>else 2</td>
        </tr>
        <tr>
            <td class="action">Action</td>
            <td>action 1</td>
            <td>action 2</td>
        </tr>
    </tbody>
</table>

我有一些 jQuery，比如：

    $("#searchText").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tableData tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });

在这里摆弄：https ://jsfiddle.net/jreljac/4hfn0sqb/1/

我希望搜索排除每行第一个单元格中的文本。如果有人要输入“动作”，它将过滤掉前两行，只留下第三行。目前，没有过​​滤任何内容，因为“操作”位于每<tbody>行的第一个单元格中。

我尝试了几种添加组合，.not(".action")但没有成功。不使用插件，这可能吗？

标签： jquery

解决方案

为此，您可以使用:gt(0)忽略第一列td单元格的文本：

$(this).toggle($(this).find('td:gt(0)').text().toLowerCase().indexOf(value) > -1);

另请注意，您应该在这里使用each()，而不是filter()。这是因为前者用于循环。后者用于通过提供的函数来减少收集，您并没有完全这样做，并且这里不需要。这是一个更新的完整示例：

$("#searchText").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  
  $("#tableData tr").each(function() {
    var $tr = $(this);  
    $tr.toggle($tr.find('td:gt(0)').text().toLowerCase().indexOf(value) > -1);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchText" type="text" placeholder="Search...">
<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody id="tableData">
    <tr>
      <td>Action</td>
      <td>something 1</td>
      <td>something 2</td>
    </tr>
    <tr>
      <td>Action</td>
      <td>else 1</td>
      <td>else 2</td>
    </tr>
  </tbody>
</table>

如果出于某种原因，您仍然想使用filter()，那么您需要像这样重构您的逻辑；注意 and 的andreturn使用：show()hide()

$("#searchText").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  
  $("#tableData tr").show().filter(function() {
    var $tr = $(this);  
    return $tr.find('td:gt(0)').text().toLowerCase().indexOf(value) == -1
  }).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchText" type="text" placeholder="Search...">
<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody id="tableData">
    <tr>
      <td>Action</td>
      <td>something 1</td>
      <td>something 2</td>
    </tr>
    <tr>
      <td>Action</td>
      <td>else 1</td>
      <td>else 2</td>
    </tr>
  </tbody>
</table>

推荐阅读