jqueryはtrを表示および非表示に動的に設定します

Web ページには大量のデータと情報が表示されるため、スクロール バーやページングではもはやニーズを満たすことができません。したがって、データを表示および非表示にするためのいくつかのより良い方法が必要です。この記事ではjQueryを使ってtrの表示・非表示を動的に設定したり、テーブル内のデータを直接表示・非表示にする方法を紹介します。

1. テーブルをクリアする

テーブルを動的に設定するプロセスでは、最初にテーブルをクリアすることをお勧めします。テーブルをクリアするには、次のコードを使用します。

$("#myTable tbody tr").remove();

このうち、#myTable は操作対象のテーブル ID、tbody はテーブルの本体、tr はテーブルの行を表します。

2. すべての行を表示する

テーブル内のすべての行を表示するには、次のコードを使用できます:

$("#myTable tbody tr").show();

このようにして、テーブルのすべての行が表示されます。表示されます。

3. すべての行を非表示にする

テーブル内のすべての行を非表示にするには、次のコードを使用できます:

$("#myTable tbody tr").hide();

これにより、テーブルのすべての行が非表示になります。

4. 条件に従って行を表示する

条件に従って行を表示するには、次のコードを使用します:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).show();

このうち、条件は必要に応じて変更できます。このメソッドは、テキスト コンテンツ、クラス、その他の属性などの特定の基準に基づいて行を表示できます。

5. 条件に基づいて行を非表示にする

次のコードを使用して、条件に基づいて行を非表示にします:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).hide();

これにより、指定された条件に基づいて行が非表示になります。

6. 行の検索

次の jQuery コードを使用してテーブルの行を検索します:

$("#myTable tbody tr").each(function () {
    var rowText = $(this).text().toLowerCase();
    $('input[type="text"]').keyup(function () {
        if ($(this).val().toLowerCase() === "" || rowText.indexOf($(this).val().toLowerCase()) !== -1) {
            $(this).closest("tr").show();
        } else {
            $(this).closest("tr").hide();
        }
    });
});

このコードは、まずテーブルのすべての行を走査し、入力ボックスにテキストを入力します。 。テキスト ボックスにコンテンツがない場合はすべての行が表示され、一致するものが見つかった場合は一致する行のみが表示され、一致しない場合は残りの行がすべて非表示になります。

7. 概要

jQuery を使用すると、テーブルの行の表示と非表示を動的に設定することが非常に簡単です。この記事では、テーブルをクリアする方法、すべての行を表示または非表示にする方法、条件に応じて行を表示または非表示にする方法、およびテーブルの行を検索する方法について説明します。これらの手法により、データをより適切に表示し、ユーザー エクスペリエンスを向上させることができます。

以上がjqueryはtrを表示および非表示に動的に設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。