はじめに
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)