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

HTML DOM TableRowオブジェクトの使い方を徹底解説！プロパティ・メソッドから実装例まで

HTML DOM の TableRow オブジェクトは、HTML文書内の <tr> 要素（テーブルの行）を表すオブジェクトです。JavaScriptを使えば、動的にテーブル行を作成・操作することができます。

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

TableRowオブジェクトは、document.createElement() メソッドを使用して新しく作成できます。構文は以下の通りです。

document.createElement("TR");

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

TableRowオブジェクトには、行の位置情報を取得するための便利なプロパティが用意されています。

プロパティ説明
rowIndexテーブル全体の rows コレクションにおける、その行の位置（インデックス）を返します。
sectionRowIndexthead、tbody、または tfoot セクション内の rows コレクションにおける、その行の位置を返します。

rowIndex と sectionRowIndex の違い

rowIndex はテーブル全体の中での位置を示すのに対し、sectionRowIndex は属するセクション（tbodyなど）内での相対的な位置を示します。この違いを理解しておくと、行の特定や操作がより正確に行えます。

TableRowオブジェクトの主なメソッド

セルの追加や削除を行うためのメソッドが提供されています。

メソッド説明
deleteCell()現在のテーブル行から指定したセルを削除します。
insertCell()現在のテーブル行に新しいセルを挿入します。

実装例：TableRowオブジェクトで行を追加する

それでは、実際に TableRow オブジェクトを使ってテーブルに行を動的に追加するサンプルコードを見てみましょう。

サンプルコード

<!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 TableRow Object Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
</thead>
<tbody class="table-body">
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create TableRow</button>
<script>
    function get() {
        var tr = document.createElement("TR");
        tr.innerHTML = "<td>Mario</td><td>French</td>"
        document.querySelector(".table-body").appendChild(tr);
    }
</script>
</body>
</html>

コードのポイント解説

このサンプルでは、以下の手順で行を追加しています。

  1. document.createElement("TR") — 新しい行（tr要素）を作成します。
  2. innerHTML でセルを設定 — 作成した行に「Mario」と「French」という2つのセル（td要素）を含めます。
  3. appendChild(tr) — tbody 要素の末尾に新しい行を追加します。

実行結果

ページを開くと、「Name」「Language」ヘッダーを持つテーブルと、赤いボタンが表示されます。

HTML DOM TableRowオブジェクトの使い方を徹底解説！プロパティ・メソッドから実装例まで

「Create TableRow」ボタンをクリックすると、新しい行「Mario / French」がテーブルに追加されます。

HTML DOM TableRowオブジェクトの使い方を徹底解説！プロパティ・メソッドから実装例まで

まとめ

HTML DOM の TableRow オブジェクトを使うことで、JavaScriptからテーブルの行を柔軟に操作できます。document.createElement("TR") による行の生成、insertCell() / deleteCell() によるセルの管理、rowIndex プロパティによる位置取得などを組み合わせれば、動的なテーブルUIを簡単に構築できます。データの一覧表示や編集可能なテーブルなど、さまざまな場面で活用してみてください。

  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 ではサポートされていないため注