按给定列的内容过滤行

Question

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类的列的内容。

我无法弄清楚如何实现这一目标。

Answer 1

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

请注意，:contains pseudo class selector在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>