🫡
[Javascript]テーブル行を動的に生成
はじめに
今回はオブジェクトの個数に応じてテーブル行を動的に生成していきます。
コード
<table id="box">
</table>
ddocument.addEventListener("DOMContentLoaded", function () {
const tableElement = document.getElementById("box");
const items = [
{ name: "シャープペンシル", price: 100 },
{ name: "鉛筆", price: 50 },
{ name: "ボールペン", price: 120 },
];
const callback = function (item) {
const { name, price } = item;
return `
<tr>
<td>
<p>${name}</p>
</td>
<td>
<p>${price}</p>
</td>
</tr>
`;
};
tableElement.innerHTML = items.map((item) => callback(item)).join("");
});
解説
まず、map()は要素一つ一つに対し、コールバック関数を実行し、新たな配列を作り出すメソッドになります。
items.map((item) => callback(item))の時点で
Array=
[0]
<tr>
<td>
<p>シャープペンシル</p>
</td>
<td>
<p>100</p>
</td>
</tr>
[1]
<tr>
<td>
<p>鉛筆</p>
</td>
<td>
<p>50</p>
</td>
</tr>
[2]
<tr>
<td>
<p>ボールペン</p>
</td>
<td>
<p>120</p>
</td>
</tr>
となっています。
最後にjoin()で上記の配列をすべて結合し、tableのHTML要素を変更しています。
さいごに
こういう書き方もあるんだ~と思ったので、共有しました!
だれかのお役に立てればうれしいです!
Discussion