JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのDOMでテーブルセルのinnerHTMLを取得する方法をわかりやすく解説

JavaScriptでHTMLテーブルの特定のセル（<td>）の中身を取得したい場合、DOMが提供するinnerHTMLプロパティを使用します。innerHTMLプロパティは、要素内に含まれるHTMLコンテンツを文字列として読み取ったり、書き換えたりできる便利な機能です。

innerHTMLプロパティとは

innerHTMLは、指定した要素の開始タグと終了タグの間にあるHTMLをそのまま文字列として返します。テーブルの場合、rowsコレクションで行を取得し、さらにcellsコレクションでセルにアクセスすることで、任意のセルの内容を簡単に参照できます。

サンプルコード：セルのinnerHTMLを表示する

以下のコードでは、ボタンをクリックするとテーブルの1行目・1列目のセル（「One」）の内容を取得して画面に表示します。

<!DOCTYPE html>
<html>
<head>
  <script>
    function cellFunc(x) {
      // 指定されたIDのテーブルから1行目のセル群を取得
      var cell = document.getElementById(x).rows[0].cells;
      // 最初のセルのinnerHTMLを表示
      document.write(cell[0].innerHTML);
    }
  </script>
</head>
<body>
  <table style="border:2px solid black" id="newtable">
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>
  </table>
  <p>
    <input type="button" onclick="cellFunc('newtable')" value="Display Table Cell">
  </p>
</body>
</html>

コードの解説

処理の流れは以下のとおりです。

1. テーブルの取得：document.getElementById('newtable')によって、IDが「newtable」のテーブル要素を取得します。

2. 行とセルへのアクセス：rows[0]で1行目（<tr>）を取得し、続けて.cellsでその行に含まれるすべてのセル（<td>）のコレクションを取得します。

3. 内容の表示：cell[0].innerHTMLで1つ目のセルの内容「One」を取得し、document.write()でページに出力しています。

補足：textContentとの違い

セル内がプレーンなテキストのみであれば、textContentプロパティを使っても同様に内容を取得できます。innerHTMLはHTMLタグごと文字列として返すのに対し、textContentはタグを除いたテキストのみを返す点が異なります。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでテーブルのセル間のスペース（余白）を設定する方法

    JavaScriptでテーブルのセル間にスペースを設定するには、borderSpacingプロパティを使用します。このプロパティに値を指定することで、セル同士の間隔を自由に調整できます。borderSpacingプロパティとはborderSpacingは、CSSの「border-spacing」プロパティに対応するJavaScriptのスタイルプロパティです。テーブルのセルとセルの間隔を「15px」のようにピクセル単位で指定できます。なお、このプロパティが有効に機能するのは、テーブルのボーダー表示モデルが「separate」（分離モデル）の場合です。HTMLのtable要素はデフォルトで分離モ

  2. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo