表

JavaScript
Posted at 2025-11-19
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>systemConfig Table</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
      background: #f5f5f5;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: white;
    }
    th, td {
      padding: 10px;
      border: 1px solid #ddd;
    }
    th {
      background: #fafafa;
      text-align: left;
      font-weight: bold;
    }
    .indent-1 { padding-left: 20px; }
    .indent-2 { padding-left: 40px; }
    .indent-3 { padding-left: 60px; }
  </style>
</head>
<body>

  <h2>systemConfig（初期表示）</h2>

  <table id="configTable">
    <thead>
      <tr>
        <th>項目</th>
        <th>値</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    const systemConfig = {
      appName: "GenLearn AI",
      version: "1.2.0",
      maintenanceMode: false,
      api: {
        endpoint: "/api/v1",
        timeoutMs: 8000
      },
      ui: {
        theme: "light",
        language: "ja"
      }
    };

    const tbody = document.querySelector("#configTable tbody");

    function render(obj, depth = 0) {
      for (const key in obj) {
        const value = obj[key];
        const tr = document.createElement("tr");

        const tdKey = document.createElement("td");
        tdKey.textContent = key;
        if (depth > 0) tdKey.classList.add(`indent-${depth}`);

        const tdValue = document.createElement("td");

        if (typeof value === "object" && value !== null && !Array.isArray(value)) {
          tdValue.textContent = "{...}";
          tr.appendChild(tdKey);
          tr.appendChild(tdValue);
          tbody.appendChild(tr);
          render(value, depth + 1);
        } else {
          tdValue.textContent = String(value);
          tr.appendChild(tdKey);
          tr.appendChild(tdValue);
          tbody.appendChild(tr);
        }
      }
    }

    render(systemConfig);
  </script>

</body>
</html>
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up