jqueryを使ってテーブルを素早く更新する方法

フロントエンド開発では、テーブルの表示が非常に一般的です。ただし、テーブル内のデータを更新する必要がある場合、DOM 要素を直接変更するなどの従来の方法を使用すると、コードの可読性と保守性が非常に悪くなります。現時点では、jQuery ライブラリの登場により、テーブルを迅速に更新するためのソリューションが提供されます。

jQuery は非常に人気のある JavaScript ライブラリです。その主な特徴は、DOM をエレガントに操作し、インタラクティブなページを迅速に構築するのに役立つ、シンプルで高速な API を提供することです。その中でもjQueryにはテーブル上のデータを素早く更新できる便利なメソッドが数多く用意されているので、具体的な実装を順を追って説明していきます。

1. テーブル オブジェクトの取得

テーブルの更新を開始する前に、まずテーブル オブジェクトを取得する必要があります。テーブル要素は、jQuery のセレクターを使用して選択できます。たとえば、クラス「table-data」の識別子を持つテーブルがある場合、コードは次のようになります。

let table = $(".table-data");

このテーブル オブジェクトを通じて、テーブルを操作できます。

2. .text() を使用してセルのコンテンツを更新する

セル内のテキストのコンテンツのみを更新する必要がある場合は、.text() メソッドを使用して完了できます。セレクターを通じて変更するセル要素を取得し、text() メソッドを使用して、パラメーターを通じて更新する必要があるテキスト コンテンツを渡します。たとえば、行 2、列 3 のセルのテキストを「変更されたテキスト」に変更します。

let td = table.find("tr:eq(1) td:eq(2)");
td.text("修改后的文本");

ここでは :eq セレクターが使用されていることに注意してください。これは、対応する特定の要素を選択することを意味します。シーケンス番号は 0 からカウントされます。したがって、tr:eq(1) はテーブルの行 2 の要素を選択することを意味し、td:eq(2) は列 3 のセル要素を選択することを意味します。

3. .attr() を使用してセル属性を更新する

セル内のテキスト コンテンツを更新することに加えて、セル内の属性も更新する必要がある場合があります。たとえば、セル内の data-* 属性を更新したり、セルの class 属性を変更したりする必要がある場合があります。この時点では、.attr() メソッドを使用して実行できます。たとえば、行 2、列 3 のセルの data-id 属性を 123:

let td = table.find("tr:eq(1) td:eq(2)");
td.attr("data-id", "123");

に変更します。複数の属性を更新する必要がある場合は、値をオブジェクト経由で渡すことができることに注意してください。たとえば、行 2、列 3 のセルの class 属性と data-id 属性を変更するには、コードは次のようになります:

let td = table.find("tr:eq(1) td:eq(2)");
td.attr({
  "class": "new-class",
  "data-id": "123"
});

4. .html() を使用してセルの内容を更新します

セルのコンテンツを更新するときに、更新する必要があるコンテンツに HTML タグが含まれている場合は、.html() メソッドを使用できます。 .text() メソッドを使用する場合と同様に、jQuery セレクターを使用して更新する必要があるセルを選択し、パラメーターを通じて更新する必要がある HTML コードを渡すことができます。たとえば、行 2 と列 3 のセルの内容を

let td = table.find("tr:eq(1) td:eq(2)");
td.html("<a href='#'>链接文本</a>");

5 に変更します。行全体を更新するには、.replaceWith() と .replaceWith() を使用します。

場合によっては、セルが存在する行全体を更新する必要があるため、上記の方法を使用するのは少し面倒です。この時点で、 .replaceWith() メソッドを使用して、HTML コードの行全体を直接置換できます。たとえば、行 2 の内容全体を次のように置き換えます。

let tr = table.find("tr:eq(1)");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

さらに、特定のセルが配置されている行全体を変更するだけの場合は、まず行全体の HTML コードを取得します。次に、セルが配置されている行全体を変更し、行を置き換えるだけです。

let td = table.find("tr:eq(1) td:eq(2)");
let tr = td.parents("tr");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

6. .empty() と .append() を使用してテーブルの内容を更新します

上記のメソッドを使用してセルまたは行全体を 1 つずつ更新することに加えて、別の方法もあります。 jQuery.empty() メソッドと .append() メソッドを使用してテーブルの元のコンテンツをクリアし、新しい HTML コードを追加する方法。たとえば、テーブルのコンテンツ全体を新しい HTML コードに置き換えるには、次のメソッドを使用できます:

let newHtml = "<table><tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr></table>";
table.empty().append(newHtml);

上記は、jQuery を使用してテーブルを迅速に更新するいくつかの方法です。このメソッドを通じて、テーブルを便利かつ迅速に更新され、コードの効率が向上し、保守性と可読性により、テーブル内のデータを迅速に変更および更新することもできます。

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