jQueryでテーブルを変更する

jQuery (「ジャックウェイ」と発音) は、Web 開発における DOM 操作、特殊効果処理、およびイベント応答を簡略化するために使用される人気のある JavaScript ライブラリです。 jQuery を使用すると、HTML テーブルのプロパティとスタイルを簡単に変更できます。この記事では、jQuery を使用して HTML テーブルのコンテンツ、スタイルを変更し、行と列を追加する方法について説明します。

テーブル コンテンツの変更

テーブル コンテンツの変更は、HTML 要素のテキスト コンテンツを操作することによって実現されます。 jQuery では、.text() メソッドを使用して要素のテキスト コンテンツを取得および設定できます。次に、jQuery を使用してテーブルの最初の行を「これが新しいヘッダーです」に変更する方法を示す例を示します。

<table>
    <tr>
        <th>旧表头1</th>
        <th>旧表头2</th>
        <th>旧表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

$("table tr:first th:first").text("这是新的表头");

この例では、セレクター $("table tr:first th: first ") はテーブルの最初のセルを選択します。次に、.text() メソッドを使用して、テキストの内容を「これは新しいテーブル ヘッダーです」に変更します。

テーブル スタイルの変更

テーブル スタイルは CSS で制御できます。 jQuery には、要素のスタイルを操作するためのメソッドがいくつか用意されています。最も一般的に使用されるのは、.addClass() メソッドと .removeClass() メソッドです。これらのメソッドは要素にクラスを追加または削除し、それによってそのスタイルを変更します。次のコードは、jQuery を使用してテーブル内の行を青色の背景色に変える方法を示しています。

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

$("table tr:nth-child(2)").addClass("blue-background");

この例では、セレクター $("table tr:nth-child(2)") を使用して、テーブルを選択します。 の 2 行目はコンテンツ行です。次に、.addClass("blue-background") メソッドを使用して、「blue-background」スタイルを行に追加します。

行と列の追加

テーブルに新しい行と列を追加するには、jQuery の .append() メソッドを使用する必要があります。このメソッドは、指定された要素の末尾に新しい要素を追加します。 jQuery を使用してテーブルの末尾に行を追加する方法を示す例を次に示します。

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

$("table").append("<tr><td>新内容1</td><td>新内容2</td><td>新内容3</td></tr>");

この例では、$("table") セレクターを使用してテーブル要素が選択されています。次に、.append() メソッドを使用して、a34de1251f0d9fe1e645927f19a896e8 要素の行をテーブルに追加し、その中に新しいコンテンツを含む 3 つの b6c5a531a458a2e790c1fd6421739d1c 要素を追加します。

jQuery を使用してテーブルに列を追加する方法を示す例を次に示します。

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

$("table tr").each(function () {
    $(this).append("<td>新内容</td>");
});

この例では、セレクター $("table tr") がテーブル内の各行を選択します。次に、.each() メソッドを使用して各行を繰り返し処理し、.append() メソッドを使用して、新しいコンテンツを含む 要素を各行の末尾に追加します。

結論

この記事では、jQuery を使用して HTML テーブルのコンテンツとスタイルを変更する方法、およびテーブルに新しい行と列を追加する方法を学びました。これらのテクノロジーを理解することで、開発者は動的で対話型の HTML テーブルをより簡単に作成できるようになり、ユーザー エクスペリエンスが向上します。フォームを開発するときは、開発効率とコード品質を向上させるために、手書きコードの代わりに jQuery などの JavaScript フレームワークを使用することをお勧めします。

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