jqueryでtdの値を変更する方法

jquery では、html() メソッドを使用して td の値を変更できます。このメソッドの機能は、選択した要素のコンテンツを設定または返すことです。構文は「td element object.html」です。 ('td 変更された値 ')」。

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery は td の値をどのように変更しますか?

jquery では、テーブル内の td の値は主に html() メソッドを通じて変更されます。このメソッドはテキスト コンテンツの変更と、 HTML コンテンツの変更をサポートしています。

test.html という名前の新しい HTML ファイルを作成して、jquery がテーブル内の td の値を変更する方法を説明します。 jquery.min.js ライブラリ ファイルを導入し、ファイルを正常にロードした後でのみ、jquery のメソッドを使用できます。

table、tr、td タグを使用して 2 行 2 列のテーブルを作成し、その境界線を 1px に設定します。 button タグを使用して、ボタン名「Modify td value」のボタンを作成します。

onclick イベントをボタン button にバインドします。ボタンがクリックされると、edittd() 関数が実行されます。

js タグで edittd() 関数を作成します。関数内で、要素名 td を通じて td オブジェクト コレクションを取得し、eq(2) メソッドを使用して 3 番目の td オブジェクトを取得し、次に使用しますhtml() メソッドを使用して変更します。td の値。たとえば、ここでは td の値が 3 に変更されます。

test.html ファイルをブラウザで開き、ボタンをクリックして効果を確認します。

ボタンをクリックした後:

概要:

1. test.html を作成します。ファイル 。

2. ファイル内で、table、tr、td タグを使用して 2 行 2 列のテーブルを作成し、button タグを使用して js 関数の実行をトリガーするボタンを作成します。

3. js タグ内に関数を作成します。関数内で td オブジェクトを取得します。eq() メソッドを使用して最初の td オブジェクトを取得し、次に html() メソッドを使用して値を変更しますTDの。

注意事項

eq() メソッドは 0 から始まり、eq(0) は最初の要素オブジェクトを表し、eq(1) は 2 番目の要素オブジェクトを表します。

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

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