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

HTML DOM TableHeaderオブジェクトの使い方を徹底解説

HTML DOMのTableHeaderオブジェクトは、HTMLドキュメント内の<th>要素（テーブルヘッダーセル）を表すオブジェクトです。JavaScriptを使って動的にテーブルの見出しセルを作成・操作したい場合に活用できます。

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

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

構文

document.createElement("TH");

引数に「TH」を指定することで、<th>要素に対応するTableHeaderオブジェクトが生成されます。

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

プロパティ説明
cellIndexテーブル行内のセルコレクションにおける、そのセルの位置（インデックス）を返します。
colSpancolspan属性の値を取得および変更します。セルを横方向に結合する際に使用します。
headersheaders属性の値を取得および変更します。関連するヘッダーセルとの紐付けを定義できます。
abbrabbr属性の値を取得および変更します。ヘッダーセル内容の省略形を指定するために使われます。
rowSpanrowspan属性の値を取得および変更します。セルを縦方向に結合する際に使用します。

TableHeaderオブジェクトの使用例

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

サンプルコード

<!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 TableHeader Object デモ</h1>
<table border="2">
<thead>
<tr class="table-header">
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create a TableHeader</button>
<script>
    function get() {
        var th1 = document.createElement("TH");
        var th2 = document.createElement("TH");
        th1.innerHTML = "Name";
        th2.innerHTML = "Language";
        document.querySelector('.table-header').appendChild(th1);
        document.querySelector('.table-header').appendChild(th2);
    }
</script>
</body>
</html>

実行結果

ページを読み込んだ直後は、テーブルにはデータ行のみが表示されています。

HTML DOM TableHeaderオブジェクトの使い方を徹底解説

ここで「Create a TableHeader」ボタンをクリックすると、get()関数が実行され、createElement("TH")によって2つのTableHeaderオブジェクトが生成されます。それぞれ「Name」と「Language」というテキストが設定され、thead内のtr要素に追加されます。

HTML DOM TableHeaderオブジェクトの使い方を徹底解説

このように、TableHeaderオブジェクトを利用すれば、ボタン操作などのユーザーのアクションに応じて、テーブルのヘッダーを動的に生成することが可能です。データの一覧表を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 ではサポートされていないため注