【Javascript】表（table）の動的作成

Javascript

2017.11.08

この記事では、Javascriptで2次元配列のデータから表（table）を動的に作成する方法とソースコードについて紹介します。

表の動的作成
ソースコード
実行結果

表の動的作成

Javascriptでは、DOMの機能を使うことで表（table）を動的に作成できます。
今回は２次元配列のデータから表を作成しました。

ソースコード

サンプルプログラムのソースコードです。

Javascript

■main.js

// 表の動的作成
function makeTable(data, tableId){
    // 表の作成開始
    var rows=[];
    var table = document.createElement("table");

    // 表に2次元配列の要素を格納
    for(i = 0; i < data.length; i++){
        rows.push(table.insertRow(-1));  // 行の追加
        for(j = 0; j < data[0].length; j++){
            cell=rows[i].insertCell(-1);
            cell.appendChild(document.createTextNode(data[i][j]));
            // 背景色の設定
            if(i==0){
                cell.style.backgroundColor = "#bbb"; // ヘッダ行
            }else{
                cell.style.backgroundColor = "#ddd"; // ヘッダ行以外
            }
        }
    }
    // 指定したdiv要素に表を加える
    document.getElementById(tableId).appendChild(table);
}
window.onload = function(){
// 表のデータ
var data = [[11, 12, 13],
            [21, 22, 23],
            [31, 32, 33],
            [41, 42, 43]];

// 表の動的作成
makeTable(data,"table");
};

HTML

■index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TEST</title>
  <pre type="text/javapre" src="main.js"></pre>
</head>
<body>
  <div id="table"></div>
</body>
</html>