HTML DOMテーブルオブジェクトとは？作成方法とプロパティ・メソッドをわかりやすく解説
HTML DOMのテーブルオブジェクトは、HTMLドキュメント内の<table>要素をJavaScriptから操作するためのオブジェクトです。このオブジェクトを使うことで、表の動的な生成や編集が可能になります。
ここでは、テーブルオブジェクトの基本的な作成方法から、主なプロパティ、メソッド、そして実際のコード例まで詳しく解説していきます。
テーブルオブジェクトの作成方法（構文）
テーブルオブジェクトを作成するには、以下の構文を使用します。
document.createElement("TABLE");テーブルオブジェクトの主なプロパティ
テーブルオブジェクトには、以下のようなプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| caption | HTMLドキュメント内のテーブルにある<caption>要素を返します。 |
| tFoot | HTMLドキュメント内のテーブルにある<tfoot>要素を返します。 |
| tHead | HTMLドキュメント内のテーブルにある<thead>要素を返します。 |
テーブルオブジェクトの主なメソッド
テーブルオブジェクトには、表の操作に便利な以下のメソッドが用意されています。
| メソッド | 説明 |
|---|---|
| createCaption() | 空の<caption>要素を生成し、テーブルに追加します。 |
| createTFoot() | 空の<tfoot>要素を生成し、テーブルに追加します。 |
| createTHead() | 空の<thead>要素を生成し、テーブルに追加します。 |
| deleteCaption() | テーブルから最初の<caption>要素を削除します。 |
| deleteRow() | テーブルから<tr>要素を削除します。 |
| deleteTHead() | テーブルから<thead>要素を削除します。 |
| deleteTFoot() | テーブルから<tfoot>要素を削除します。 |
| insertRow() | 空の<tr>要素を生成し、テーブルに追加します。 |
実装例
それでは、テーブルオブジェクトを使用した実際のサンプルコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #fff;
color: #0197F6;
}
h1 {
color: #23CE6B;
}
.btn {
background-color: #fff;
border: 1.5px dashed #0197F6;
height: 2rem;
border-radius: 2px;
width: 60%;
margin: 2rem auto;
display: block;
color: #0197F6;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM table Object デモ</h1>
<button onclick="createTable()" class="btn">テーブルオブジェクトを作成</button>
<script>
function createTable() {
var table = document.createElement("TABLE");
table.innerHTML = `<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>`;
table.setAttribute('border', "2");
table.style.margin = "2rem auto";
document.body.appendChild(table);
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のように表示されます。
画面上の「テーブルオブジェクトを作成」ボタンをクリックすると、新しいテーブルオブジェクトが生成され、ページに表示されます。
まとめ
HTML DOMのテーブルオブジェクトを利用すれば、JavaScriptだけで動的に表を作成・操作できます。createElement("TABLE")でオブジェクトを生成し、insertRow()やdeleteRow()などのメソッドを組み合わせることで、柔軟なテーブル操作が可能になります。Webアプリケーションで動的なデータ表示が必要な場面でぜひ活用してみてください。
-
HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説
HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注