使用jquery过滤表行

Question

使用jquery过滤表行

我想知道如何根据列值过滤表行.排除了插件,我想弄清楚如何使这个东西工作.

Answer 1

你的问题很模糊,但一般的想法是这样的:

$("td").filter(function() {
    return $(this).text().indexOf("whatever") !== -1;
}).parent().remove();

Run Code Online (Sandbox Code Playgroud)

这是一个有效的例子.它首先选择所有表格单元格,然后根据某些文本过滤它们,并删除tr任何剩余行的父级(应该是).

如果您不关心单个列,则可以选择tr元素并删除对其的调用parent.这仍然有效,因为text将返回所选孩子的所有孩子的文本tr.

根据评论更新

以上将完全从DOM中删除匹配的表行.如果您想隐藏它们,可以替换remove为hide.如果您想再次显示行,则可以执行以下操作:

$("tr").show();

Run Code Online (Sandbox Code Playgroud)

选择所有tr元素并显示它们(已经可见的元素不会受到影响,因此之前隐藏的元素将再次可见).

Answer 2

Pet*_*los 13

这是过滤表行的另一个示例。将过滤器值和表格行文本转为小写会使过滤器不区分大小写。

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

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="form-group">
    <label for="filter">Filter:</label> <input type="text" id="filter">
  </div>
  <table id="example-table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Bob</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jenny</td>
        <td>Smith</td>
        <td>51</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>Smithers</td>
        <td>52</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，6 月前
查看次数：	20227 次
最近记录：	7 年，10 月前