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

HTML DOM TableDataオブジェクトとは？使い方とプロパティを徹底解説

HTML DOM TableDataオブジェクトとは

HTML DOMのTableDataオブジェクトは、HTMLドキュメント内の<td>要素を表すオブジェクトです。JavaScriptを利用することで、テーブルのセル（データセル）を動的に生成したり、既存セルの属性値を取得・変更したりすることができます。

TableDataオブジェクトの作成方法

新しいTableDataオブジェクトを作成するには、document.createElement()メソッドを使用します。

構文

document.createElement("TD");

このメソッドを実行すると、<td>要素がメモリ上に生成され、その後appendChild()などでDOMツリーに追加することで画面に反映されます。

TableDataオブジェクトの主なプロパティ

プロパティ
説明
cellIndex
テーブル行のセルコレクション内における、そのセルの位置（インデックス番号）を返します。
colSpan
colspan属性の値を取得および変更します。セルを横方向に結合する際に使用します。
headers
headers属性の値を取得および変更します。見出しセルとの関連付けに使用されます。
rowSpan
rowspan属性の値を取得および変更します。セルを縦方向に結合する際に使用します。

TableDataオブジェクトの使用例

それでは、TableDataオブジェクトを使った具体的なサンプルコードを見てみましょう。以下の例では、ボタンをクリックすると新しい<td>要素が2つ生成され、空の行に動的に追加されます。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
        width: 400px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>DOM TableData Object Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
<tr class="new-row">
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create a TableData</button>
<script>
    function get() {
        var td1 = document.createElement("TD");
        var td2 = document.createElement("TD");
        td1.innerHTML = "Mario";
        td2.innerHTML = "French";
        document.querySelector('.new-row').appendChild(td1);
        document.querySelector('.new-row').appendChild(td2);
    }
</script>
</body>
</html>

コードの解説

  • document.createElement("TD")で、新しいTableDataオブジェクト（<td>要素）を2つ生成しています。
  • innerHTMLプロパティを使って、各セルに表示するテキスト（"Mario" と "French"）を設定しています。
  • appendChild()メソッドにより、class属性がnew-rowの空の行に対して、生成したセルを順番に追加しています。

出力結果

HTML DOM TableDataオブジェクトとは？使い方とプロパティを徹底解説

ページを開くと、上記のように名前と言語の一覧が表示されたテーブルと、「Create a TableData」ボタンが表示されます。

このボタンをクリックすると、TableDataオブジェクトが新しく作成され、空だった行に「Mario」「French」という2つのセルが追加されます。

HTML DOM TableDataオブジェクトとは？使い方とプロパティを徹底解説

まとめ

TableDataオブジェクトを使うことで、JavaScriptからテーブルのセルを自由に操作できます。動的に表の内容を更新したい場合や、ユーザーの操作に応じて行・セルを追加したい場合に非常に便利な機能なので、ぜひ活用してみてください。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注