web-dev-qa-db-ja.com

jqueryでテーブル行をフィルタリングする

列の値に基づいてテーブルの行をフィルタリングする方法を知りたいのですが。プラグインは除外されていますが、これを機能させる方法を理解したいと思います。

jqueryfilterrow
16
mko

あなたの質問はかなり曖昧ですが、一般的な考え方は次のようになります。

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

これが 実例 です。最初にすべてのテーブルセルを選択し、次にテキストに基づいてそれらをフィルタリングし、残りの行の親（trである必要があります）を削除します。

個々の列を気にしない場合は、tr要素を選択して、parentへの呼び出しを取り除くことができます。 textは、選択したtrのすべての子のテキストを返すため、これは引き続き機能します。

コメントに基づいて更新

上記は、一致するテーブル行をDOMから完全に削除します。それらを非表示にしたい場合は、removeをhideに置き換えることができます。その後、行を再び表示したい場合は、次のようにすることができます。

$("tr").show();

これは、すべてのtr要素を選択して表示します（すでに表示されている要素は影響を受けないため、以前に非表示にされた要素だけが再び表示されます）。

19
James Allardice

テーブルの行をフィルタリングする別の例を次に示します。フィルタ値とテーブル行のテキストを小文字にすると、フィルタの大文字と小文字が区別されなくなります。

$(function() {
  $("#filter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#example-table > tbody > tr").filter(function() {      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<!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>
7
Peter Tarlos

すべてのテーブルフィルタリングの背後にある基本的な考え方は、すべての行を非表示にしてから、<td>のコンテンツに検索文字列が含まれている行を表示することです。

JQueryを使用すると、魔法は次のように実行されます。

$('tr').filter(":contains('" + searchstring + "')").show();

しかし、これにjQueryを使用する必要はありません-私はそれのためにプレーンなJSソリューションをコーディングしました。あなたはそれを見つけることができます ここ 。

1
Stephan Weinhold