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

Question

我有一张像这样的 table

<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/

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

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

Answer 1

要实现此目的，您可以使用 :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()，那么您需要像这样重构您的逻辑；请注意 return 以及 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>