はじめに

JavaScriptの配列を使って、表(テーブル)を作る方法をまとめました。

《配列とは？》
複数のデータを１つのグループに格納して取り扱えるJavaScriptの機能のこと。
["項目１", "項目２", "項目３"]
{name:"項目１", place:"項目２", map:"項目３"}
などの形でデータを取り扱える。
大量のデータを取り扱いたい時に便利。

JavaScriptの配列で作った表の例

表(テーブル)のサンプル
https://text.sakura.ne.jp/note-sample/qiita-hairetsu-table.html

JavaScriptのソースコードの例

JavaScript (配列で表を作成)

window.onload = function() {

//[01]	<table id="lists"></table>を作成
//		<body>の下に<table>を作り、<table>の中に『id="lists"』を挿入
document.getElementsByTagName("body").item(0).appendChild(document.createElement("table")).setAttribute("id", "lists");

//[02]	表の一番上に表示する見出しを作成 (省略可)
//		CSSで太字にすると見やすくなる［例］tbody:nth-of-type(1) td{font-weight:800;}
document.getElementById('lists').insertAdjacentHTML('afterbegin', `<tr><td>山の名前</td><td>山の標高</td><td>山の所在地</td><td>ストリートビュー</td></tr>`);

//[03]	表にしたい項目の一覧を作成
//		項目は『sites[0].name』『sites[0].high』などで呼び出せる
let sites = [
{name:"富士山",		high:"3,776m",	place:"山梨県/静岡県",	map:"https://goo.gl/maps/Vat9d4fg1eyGqgcs6"} ,
{name:"北岳",		high:"3,193m",	place:"山梨県",			map:"https://goo.gl/maps/nRWy4v2JM8gQEcK86"} ,
{name:"奥穂高岳",	high:"3,190m",	place:"長野県/岐阜県",	map:"https://goo.gl/maps/PupSP3FPYXHRbyug7"} ,
{name:"間ノ岳",		high:"3,190m",	place:"山梨県/静岡県",	map:"https://goo.gl/maps/Qrgm6F6qwDzZ1cub8"} ,
{name:"槍ヶ岳",		high:"3,180m",	place:"長野県/岐阜県",	map:"https://goo.gl/maps/mmwCErWmP4VBRSBE6"} ,
{name:"白馬岳",		high:"2,932m",	place:"富山県",			map:"https://goo.gl/maps/uGMfFCu3eMpb4sjC6"} ,
{name:"赤岳",		high:"2,899m",	place:"長野県",			map:"https://goo.gl/maps/DbDY1zWg7F5M3PhF8"} ,
{name:"杓子岳",		high:"2,812m",	place:"長野県",			map:"https://goo.gl/maps/Xd2ixH46LAYKVNLq7"} ,
{name:"高尾山",		high:"599m",	place:"東京都",			map:"https://goo.gl/maps/uP6mhBno8AdSsY2M8"} ,
{name:"筑波山",		high:"877m",	place:"茨城県",			map:"https://goo.gl/maps/P17QtMYTWUYS2jBj7"}
];

//[04]	<tr></tr>を作成
//		<tr>の中に『<td>項目１</td><td>項目２</td><td>項目３</td><td>項目４</td>』を挿入
for (let i = 0; i < sites.length; ++i){
document.getElementById('lists').insertAdjacentHTML('beforeend', `<tr><td>${sites[i].name}</td><td>${sites[i].high}</td><td>${sites[i].place}</td><td><a href="${sites[i].map}">ストリートビューを見る</a></td></tr>`);
}

};

HTML・CSSのソースコードの例

HTML

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>配列を使って表(テーブル)を作る方法《JavaScript》</title>
<link rel="stylesheet" href="qiita-hairetsu-table.css">
<script src="qiita-hairetsu-table.js"></script>
</head><body>
</body></html>

CSS

@charset "UTF-8";
html,body,table{margin:0;padding:0;border:0;}
table{width:100%;border-collapse:collapse;cursor:context-menu;}
tbody:nth-of-type(1) td{background-color:rgb(255,255,255);filter:brightness(96%);font-weight:800;}
tr:hover{background-color:rgb(255,255,255);filter:brightness(99%);}
td{box-sizing:border-box;padding:4px;border:1px solid rgb(192,192,192);}
td:nth-of-type(1){width:calc(35% / 2);}
td:nth-of-type(2){width:calc(35% / 2);}
td:nth-of-type(3){width:25%;}
td:nth-of-type(4){width:40%;}
td:nth-of-type(4) a{display:block;width:100%;height:100%;}
td:nth-of-type(4) a:hover{color:rgb(153,0,0);}

配列を使うメリット

データの追加･修正･削除が簡単
データの中身が見やすい
データを出力する時の形式が変わっても簡単に対応できる
- リンク形式の例［①］[タイトル](URL)
- リンク形式の例［②］<a href="URL">タイトル</a>
ソースコードが見やすい

関連サイト

配列を使ってリンク集(リスト一覧)を作る方法《JavaScript》
https://qiita.com/text-sakura-ne-jp/items/e6a58305ae0d02141a00

(text_sakura)