按给定列的内容过滤行

tschmit007 发表于 Dev

tschmit007

的HTML：

<table>
  <tr>
    <td class="depCode">9</td>
    <td>ira furor brevis est!</td>
  </tr>
</table>

这是我的脚本：

    $("#repDepartement").keyup(function() {            
        var data = this.value;
        var rows = $("#representants").find("tr");
        if (data == '') {
            rows.show();
        } else {
            rows.hide();
            rows.filter(":contains('" + data + "')").show();
            //rows.filter(".depCode:contains('" + data + "')").show();
        }
    });

它适用于对整个行内容进行过滤。但是现在我只想过滤具有depCode类的列的内容。

我只是不知道如何实现这一目标。

毛里西奥·波普（Mauricio Poppe）

.filter() 也可以使用函数进行过滤，您可以使用该函数获取通过选择器的元素内的内容 .depCode

请注意，:contains伪类选择器在CSS中已弃用，即使它仍可在jQuery中使用

$("input").keyup(function() {
  var data = this.value;
  var rows = $("table").find("tr");
  if (data == '') {
    rows.show();
  } else {
    rows.hide();
    rows.filter(function () {
      return $(this).find('.depCode').text().indexOf(data) > -1
      // case insensitive solution
      // var columnValue = $(this).find('.depCode').text().toLowerCase()
      // var other = data.toLowerCase()
      // return columnValue.indexOf(other) > -1
    }).show()
    //rows.filter(":contains('" + data + "')").show();
    //rows.filter(".depCode:contains('" + data + "')").show();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />

<table>
  <tr>
    <td class="depCode">1</td>
    <td>foo</td>
  </tr>

  <tr>
    <td class="depCode">bar</td>
    <td>2</td>
  </tr>

  <tr>
    <td class="depCode">2</td>
    <td>baz</td>
  </tr>
</table>