🫡

[Javascript]テーブル行を動的に生成

2024/10/06に公開

はじめに

今回はオブジェクトの個数に応じてテーブル行を動的に生成していきます。

コード

<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()は要素一つ一つに対し、コールバック関数を実行し、新たな配列を作り出すメソッドになります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
そして、コールバック関数であるcreateRowではitemをnameとpriceに分割代入し、テーブル行の中身を返却しています。
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要素を変更しています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

さいごに

こういう書き方もあるんだ~と思ったので、共有しました!
だれかのお役に立てればうれしいです!

Discussion