jqueryでテーブルを変更する方法-フロントエンドQ&A-php.cn

jqueryでテーブルを変更する方法

WBOY

リリース： 2023-05-12 10:19:06

オリジナル

954 人が閲覧しました

近年、Web テクノロジーの急速な発展に伴い、jQuery はフロントエンド開発で最も人気のある JavaScript ライブラリの 1 つになりました。これは、HTML ドキュメントの管理、DOM 要素の操作、イベント処理などをより簡単に行うのに役立ちます。

Web 開発プロセスでは、テーブルはデータを表示する重要な方法です。ただし、場合によっては、フォームの変更や編集が必要になることがあります。 jQuery は、テーブルを簡単に変更できる強力な関数を提供します。次にjqueryを使ってテーブルを変更する方法を説明します。

1. テーブル行を動的に追加する

通常、ページにはリアルタイムで追加または削除する必要があるテーブル行がいくつかあります。たとえば、ショッピング Web サイトのショッピングカートリストでは、ユーザーはショッピングカート内の商品を追加または削除できます。この時点で、毎回テーブルの行を手動で追加および削除するのは非常に時間がかかり、面倒です。 jQuery には、テーブル行を動的に簡単に追加および削除できる「append()」、「prepend()」、「after()」、「before()」などのメソッドが用意されています。

たとえば、テーブルに行を追加したい場合は、次のコードを使用できます。

$("table").append("<tr><td>新行数据 1</td><td>新行数据 2</td></tr>");

ログイン後にコピー

上記のコードを実行すると、テーブルの最後の行に行が追加されます。この行の内容は「新規行データ1」と「改行データ2」です。

2. テーブルデータの動的操作

場合によっては、テーブル内の特定の列のデータを更新するなど、既存のテーブルのデータを変更する必要があります。 jQuery には、テーブルデータを簡単に変更するための「text()」および「html()」メソッドが用意されています。

たとえば、テーブルの 2 列目のデータを変更する場合は、次のコードを使用できます。

$("table tr td:nth-child(2)").text("新的数据");

ログイン後にコピー

上記のコードは、2 列目のデータをすべて更新します。テーブルのデータを「新規データ」に追加します。

3. テーブルソート機能の実装

大量のデータを含むテーブルがある場合、ユーザーがデータを簡単に表示および比較できるように、通常はテーブルソート機能が提供されます。ここでは、jQuery UI ライブラリの「sortable」メソッドを使用して、テーブルの並べ替え機能を非常に簡単に実装できます。

たとえば、次のテーブルがあります:

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

ログイン後にコピー

次のコードでテーブルを並べ替えることができます:

$(function(){
    $("table tbody").sortable({
        placeholder : "ui-state-highlight"
    });
});

ログイン後にコピー

その中で、「sortable()」関数はテーブル内にあるドラッグ可能な関数を追加し、ドラッグされた行を自動的に並べ替えます (「プレースホルダー」はプレースホルダーです。行がドラッグされると、占有位置は一時的にこのプレースホルダーによって占められます)。

上記のコードを実行すると、テーブル内の行を自由にドラッグしてテーブルの並べ替え機能を実現できます。

4. テーブルデータのリアルタイム検索

大量のデータを含む一部のテーブルでは、ユーザーが必要なデータをすばやく見つけられるようにするための検索機能を提供できます。ここでは、jQuery の「フィルター」メソッドを使用して、テーブルデータのリアルタイム検索を実現します。

たとえば、次のテーブルがあります:

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

ログイン後にコピー

次のコードを使用して、テーブルデータのリアルタイム検索を実現できます:

$(function(){
    $("#search_input").keyup(function(){
        var keyword = $(this).val();
        $("table tbody tr").hide().filter(":contains('"+ keyword +"')").show();
    });
});

ログイン後にコピー

上記のコードでは、「keyup()」メソッド検索ボックスの入力ボックスの変更が監視され、キーボードが押されたときにトリガーされます。次に、入力ボックス内のキーワードを取得し、「filter()」で一致する行をフィルタリングし、最後に「show()」で検索結果を表示します。

上記の方法により、テーブルの変更、並べ替え、検索などの操作を簡単に行うことができ、ページのユーザーエクスペリエンスを向上させることができます。

以上がjqueryでテーブルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。