📝

【JavaScript】<template>を使って、データを<table>に反映する

2023/06/09に公開

HTML

はじめに

<template>を使い、JavaScriptで持っているデータ（オブジェクト配列）を
<table>に反映するサンプルです。

screen

コード

HTMLコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>data to table</title>
    <script defer src="data-to-table.js"></script>
    <style>
      main {
        width: 100%;
        max-width: 960px;
        margin-right: auto;
        margin-left: auto;
      }
      #users_table {
        width: 100%;
        border-collapse: collapse;
      }
      #users_table thead {
        color: #fff;
        background-color: #212529;
      }
      #users_table th,
      #users_table td {
        border: 1px solid #000;
        padding: 2px;
      }
    </style>
  </head>
  <body>
    <main>
      <table id="users_table">
        <thead>
          <tr>
            <th>ID</th>
            <th>NAME</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <template id="user_table_tr_template">
        <tr>
          <th></th>
          <td></td>
        </tr>
      </template>
    </main>
  </body>
</html>

JavaScriptコード

data-to-table.js

(() => {
  // データ
  const users = [
    { id: 101, name: "NAME101" },
    { id: 102, name: "NAME102" },
    { id: 103, name: "NAME103" },
  ];

  // DOM
  const tbody = document.getElementById("users_table").querySelector("tbody"); // table要素内のtbody要素を取得
  const trTemplate = document.getElementById("user_table_tr_template").content.firstElementChild; // template要素内のtr要素を取得

  // DocumentFragmentを生成し、tbodyに追加したいtr要素を格納していく
  const fragment = new DocumentFragment();
  for (const user of users) {
    const tr = trTemplate.cloneNode(true); // テンプレートのtr要素を複製
    const trChildren = tr.children; // tr要素の子要素（th, td）を取得
    trChildren[0].textContent = user.id; // 1番目のth要素に id を設定
    trChildren[1].textContent = user.name; // 2番目のtd要素に name を設定
    fragment.appendChild(tr); // DocumentFragmentに作成したtr要素を追加
  }

  // tbodyに作成したtr要素をまとめて追加
  tbody.appendChild(fragment);
})();

【JavaScript】<template>を使って、データを<table>に反映する

はじめに

コード

参考サイト

関連書籍

Discussion