JavaScript DOM を使用してセルの innerHTML を取得するにはどうすればよいですか?

王林
リリース: 2023-09-09 17:17:02
転載
1383 人が閲覧しました

如何使用JavaScript DOM获取单元格的innerHTML?

このチュートリアルでは、JavaScript DOM を使用してセルの innerHTML を取得する方法を学びます。 JavaScript で innerHTML プロパティを使用して、セルの innerHTML を取得します。

document.getElementById() を使用すると、DOM (ドキュメント オブジェクト モデル) を簡単に操作できます。メソッドパラメータで指定された要素のIDを表す要素オブジェクトを返すメソッドです。各タグの ID は一意であるため、ID によって要素に簡単にアクセスできます。次に、 innerHTML 属性は、そのタグのテキストまたはコンテンツにアクセスするのに役立ちます。

テーブルセルコレクションを使用する

任意のテーブルの任意のセルの内容にアクセスするには、まず document.getElementById() を使用してテーブル タグにアクセスする必要があります。次に、行番号と列番号に基づいて、その特定のセルにアクセスし、innerHTML プロパティを使用してコンテンツにアクセスできます。

行番号と列番号はどちらも 0 から始まるため、最初の行にアクセスしたい場合は、row[0] と記述する必要があります。

ユーザーは、次の構文に従ってリンクの type 属性値を取得できます。

###文法### リーリー

上記の構文では、行へのアクセスを取得するために document.getElementById().rows[] を使用していることがわかります。次に、セルにアクセスするために .cells プロパティを作成しました。次の行の innerHTML プロパティを使用して、セルの内容にアクセスします。

###例###

以下の例では、table、tr、td タグを使用してテーブルを作成します。次に、テーブルにアクセスするために、 document.getElementById() メソッドを作成しました。最初のセル (つまり、行 1、列 1) にアクセスするには、rows[0] を取得し、それらを「Cell」変数に保存します。次に、コンテンツにアクセスするには、Cell[0].innerHTML を使用します。

リーリー

ユーザーが見てわかるように、[ここをクリック] ボタンをクリックすると、「getCell」関数が呼び出され、最初のセルの内容にアクセスします。

ユーザー入力によるセル属性の使用

任意のテーブルの任意のセルの内容にアクセスするには、まず document.getElementById() を使用してテーブル タグにアクセスする必要があります。次に、行番号と列番号に基づいて、その特定のセルにアクセスし、innerHTML 属性を使用してコンテンツにアクセスできます。ここでは、ウィンドウ オブジェクトのプロンプト メソッドを使用してユーザー入力を取得します。ユーザーの選択に応じて、セルにアクセスできます。

行番号と列番号はどちらも 0 から始まるため、最初の行にアクセスしたい場合は、row[0] と記述する必要があります。

ユーザーは、次の構文に従ってリンクの type 属性値を取得できます。

###文法### リーリー

上記の構文では、セルの行、列、コンテンツをユーザーから取得し、それに応じてコンテンツにアクセスします。

###例###

以下の例では、table、tr、td タグを使用してテーブルを作成します。次に、テーブルにアクセスするために、 document.getElementById() メソッドを作成しました。構文で前述したように、セルの行、列、内容をユーザーから取得し、それぞれ「row」、「col」、「content」変数に格納します。

リーリー

このチュートリアルでは、JavaScript DOM を使用してセルの innerHTML を取得する方法について説明しました。まず、 document.getElementByID() メソッドを使用してテーブルにアクセスします。次に、 rows プロパティを適用して、すべての行のコレクションを取得します。 rows コレクションでは、cells プロパティを適用して cell コレクションを取得します。セルのコレクションにインデックスを適用して、特定のセルを取得できます。

以上がJavaScript DOM を使用してセルの innerHTML を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!