jqueryでtr値を変更する方法

jQuery は、HTML DOM を簡単に変更できるようにする人気の JavaScript ライブラリです。この記事では、jQueryを使用してHTMLテーブルのtr値を変更する方法を学びます。

まず、次の HTML テーブルの例を考えてみましょう:

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>
</table>

次に、jQuery を使用して 2 行目の値を変更します。まず、2 行目の tr 要素を変数に格納する必要があります。これは、次の方法で実現できます。

var row = $('table tr:eq(1)');

これにより、テーブル内の 2 番目の tr 要素が選択され (注: jQuery では、インデックス付けは 0 から始まります)、それを「row」変数に格納します。

次に、jQuery の text() 関数を使用して、行内のセル値を変更します。たとえば、次のコードは 2 行目の最初のセルを更新します。

row.find('td:eq(0)').text('新值');

このコードは、find() 関数を使用して 2 行目の最初の td 要素 (つまり、インデックス 0 のセル) を選択します。そのテキスト値を「新しい値」に設定します。

複数のセルの値を同時に変更する必要がある場合は、次のようなコードを使用できます。

row.find('td:eq(0)').text('新值1');
row.find('td:eq(1)').text('新值2');

これにより、最初と 2 番目のセルの値が更新されます。それぞれ 2 行目。

最後に、CSS スタイルを追加して、変更された値をさらに目立たせることができます:

row.find('td:eq(0)').css('background-color', 'yellow');
row.find('td:eq(1)').css('background-color', 'orange');

これにより、更新されたセルが見やすくなります。

要約すると、jQuery を使用して HTML テーブルの tr 値を変更するのは非常に簡単です。 text() 関数と find() 関数を使用するだけで、セルの値を簡単に更新できます。

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