JavaScriptを用いた動的なテーブル生成は、テーブル構造に対する比類のない柔軟性と制御を提供し、ユーザー入力や外部ソースから取得したデータに基づいた適応を可能にします。これは、静的なHTMLテーブルの限界を超えています。
目次
HTMLテーブルタグ：簡単な復習
JavaScriptに進む前に、テーブル作成に使用される基本的なHTMLタグを再確認しましょう。基本的なHTMLテーブルは、これらのコア要素で構成されています。
<table>：テーブル全体のコンテナ。<tr>：テーブル行を定義します。<th>：テーブルヘッダーセルを指定します（通常は太字で中央揃え）。<td>：テーブルデータセルを表します。
簡単な例を示します。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
</table>
JavaScriptによるテーブル作成
JavaScriptを使用すると、これらのHTML要素をプログラムで生成し、Document Object Model（DOM）を操作して、広範なHTMLを手動で記述することなく、行、列、データを追加できます。次の関数はこれを示しています。
function createTable(data, targetElementId) {
const table = document.createElement('table');
const headerRow = table.insertRow();
//最初のオブジェクトのキーからヘッダー行を動的に作成
const keys = Object.keys(data[0]);
keys.forEach(key => {
const headerCell = headerRow.insertCell();
headerCell.textContent = key;
});
data.forEach(row => {
const dataRow = table.insertRow();
keys.forEach(key => {
const dataCell = dataRow.insertCell();
dataCell.textContent = row[key];
});
});
document.getElementById(targetElementId).appendChild(table);
}
const myData = [
{ Name: "John Doe", Age: 30, City: "New York" },
{ Name: "Jane Smith", Age: 25, City: "London" },
{ Name: "Peter Jones", Age: 40, City: "Paris" }
];
createTable(myData, 'myTableContainer'); //HTMLにid="myTableContainer"を持つdivを指定してください
テーブルを追加するHTMLにid “myTableContainer”を持つdivを含めることを忘れないでください。
高度なテーブル操作テクニック
この基本的な例は大幅に拡張できます。次のような機能を組み込むことを検討してください。
- スタイル設定：CSSを使用して外観をカスタマイズします（例：クラスまたはインラインスタイルを使用）。
- イベント処理：ヘッダーをクリックして列をソートしたり、ユーザー入力に基づいて行をフィルタリングしたりするなど、インタラクティブ性を追加します。
- ページネーション：ページにデータを表示することで、大規模なデータセットを処理します。
- データソース：APIまたはデータベースからデータを取得して、テーブルに動的にデータを入力します。
HTML、CSS、JavaScriptを組み合わせることで、特定の要件に合わせて調整された、非常に動的で応答性の高いテーブルを作成できます。