js怎么做动态嵌套表格

在JavaScript中创建动态嵌套表格的方法包括：使用DOM操作、使用模板引擎、结合CSS进行样式调整。 其中，使用DOM操作是最基本的方法，也是最灵活的。通过DOM操作，可以动态创建表格元素并嵌套子表格，以实现复杂的数据展示。下面将详细描述如何通过DOM操作实现动态嵌套表格，并介绍其他两种方法。

一、DOM操作创建动态嵌套表格

1、基本概念及准备工作

使用JavaScript的DOM操作，可以动态创建、修改和删除HTML元素。创建嵌套表格的核心步骤包括：创建主表格、为每个单元格动态添加子表格、为子表格添加行和列。

首先，需要一段基本的HTML结构来放置生成的表格：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Nested Tables</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 20px;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <div id="table-container"></div>
  <script src="script.js"></script>
</body>
</html>

2、创建主表格

在JavaScript文件（script.js）中，首先要创建主表格。可以使用document.createElement方法动态生成表格及其子元素。

document.addEventListener("DOMContentLoaded", () => {
  const tableContainer = document.getElementById("table-container");
  const mainTable = document.createElement("table");
  const mainTableHeader = document.createElement("thead");
  const headerRow = document.createElement("tr");
  const headerCell = document.createElement("th");
  headerCell.textContent = "Main Table Header";
  headerRow.appendChild(headerCell);
  mainTableHeader.appendChild(headerRow);
  mainTable.appendChild(mainTableHeader);
  const mainTableBody = document.createElement("tbody");
  mainTable.appendChild(mainTableBody);
  tableContainer.appendChild(mainTable);
});

3、添加嵌套子表格

接下来，在主表格的每个单元格中动态添加子表格。需要循环遍历主表格的行和列，并在每个单元格中插入一个新的子表格。

document.addEventListener("DOMContentLoaded", () => {
  const tableContainer = document.getElementById("table-container");
  const mainTable = document.createElement("table");
  const mainTableHeader = document.createElement("thead");
  const headerRow = document.createElement("tr");
  const headerCell = document.createElement("th");
  headerCell.textContent = "Main Table Header";
  headerRow.appendChild(headerCell);
  mainTableHeader.appendChild(headerRow);
  mainTable.appendChild(mainTableHeader);
  const mainTableBody = document.createElement("tbody");
  for (let i = 0; i < 3; i++) {
    const row = document.createElement("tr");
    for (let j = 0; j < 3; j++) {
      const cell = document.createElement("td");
      const nestedTable = document.createElement("table");
      const nestedTableBody = document.createElement("tbody");
      for (let x = 0; x < 2; x++) {
        const nestedRow = document.createElement("tr");
        for (let y = 0; y < 2; y++) {
          const nestedCell = document.createElement("td");
          nestedCell.textContent = `Cell ${i}-${j}-${x}-${y}`;
          nestedRow.appendChild(nestedCell);
        }
        nestedTableBody.appendChild(nestedRow);
      }
      nestedTable.appendChild(nestedTableBody);
      cell.appendChild(nestedTable);
      row.appendChild(cell);
    }
    mainTableBody.appendChild(row);
  }
  mainTable.appendChild(mainTableBody);
  tableContainer.appendChild(mainTable);
});

在上述代码中，通过嵌套的循环结构生成主表格和子表格，并将子表格插入到主表格的单元格中。这样的结构可以根据需要进行调整，以适应不同的数据和布局需求。

二、使用模板引擎创建动态嵌套表格

模板引擎如Handlebars.js、EJS等可以极大简化动态HTML的生成过程。通过预编译模板，模板引擎可以快速生成复杂的嵌套表格。

1、安装和引入模板引擎

以Handlebars.js为例，可以通过CDN或者npm安装和引入：

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>

2、编写模板

在HTML文件中编写Handlebars模板：

<script id="table-template" type="text/x-handlebars-template">
  <table>
    <thead>
      <tr>
        <th>Main Table Header</th>
      </tr>
    </thead>
    <tbody>
      {{#each rows}}
      <tr>
        {{#each this}}
        <td>
          <table>
            <tbody>
              {{#each this}}
              <tr>
                {{#each this}}
                <td>{{this}}</td>
                {{/each}}
              </tr>
              {{/each}}
            </tbody>
          </table>
        </td>
        {{/each}}
      </tr>
      {{/each}}
    </tbody>
  </table>
</script>

3、渲染模板

在JavaScript中编写渲染逻辑：

document.addEventListener("DOMContentLoaded", () => {
  const tableContainer = document.getElementById("table-container");
  const data = {
    rows: [
      [
        [
          ["Cell 0-0-0-0", "Cell 0-0-0-1"],
          ["Cell 0-0-1-0", "Cell 0-0-1-1"]
        ],
        [
          ["Cell 0-1-0-0", "Cell 0-1-0-1"],
          ["Cell 0-1-1-0", "Cell 0-1-1-1"]
        ],
        [
          ["Cell 0-2-0-0", "Cell 0-2-0-1"],
          ["Cell 0-2-1-0", "Cell 0-2-1-1"]
        ]
      ],
      [
        [
          ["Cell 1-0-0-0", "Cell 1-0-0-1"],
          ["Cell 1-0-1-0", "Cell 1-0-1-1"]
        ],
        [
          ["Cell 1-1-0-0", "Cell 1-1-0-1"],
          ["Cell 1-1-1-0", "Cell 1-1-1-1"]
        ],
        [
          ["Cell 1-2-0-0", "Cell 1-2-0-1"],
          ["Cell 1-2-1-0", "Cell 1-2-1-1"]
        ]
      ],
      [
        [
          ["Cell 2-0-0-0", "Cell 2-0-0-1"],
          ["Cell 2-0-1-0", "Cell 2-0-1-1"]
        ],
        [
          ["Cell 2-1-0-0", "Cell 2-1-0-1"],
          ["Cell 2-1-1-0", "Cell 2-1-1-1"]
        ],
        [
          ["Cell 2-2-0-0", "Cell 2-2-0-1"],
          ["Cell 2-2-1-0", "Cell 2-2-1-1"]
        ]
      ]
    ]
  };
  const templateSource = document.getElementById("table-template").innerHTML;
  const template = Handlebars.compile(templateSource);
  const compiledHtml = template(data);
  tableContainer.innerHTML = compiledHtml;
});

通过模板引擎，可以更加直观和高效地生成复杂的嵌套表格结构，极大减少了代码的冗余和复杂度。

三、结合CSS进行样式调整

无论是使用DOM操作还是模板引擎生成的嵌套表格，都需要结合CSS进行样式调整，以确保表格的可读性和美观性。

1、基础样式

在HTML文件的<head>中添加基础样式：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  .nested-table {
    width: 100%;
  }
  .nested-table td {
    border: none;
    padding: 4px;
  }
</style>

2、动态应用样式

在JavaScript中，可以通过classList动态添加CSS类，以应用特定的样式：

const nestedTable = document.createElement("table");
nestedTable.classList.add("nested-table");

通过结合使用JavaScript和CSS，可以灵活地控制表格的布局和样式，以适应不同的需求和场景。

四、结合项目团队管理系统

在实际项目中，动态嵌套表格通常用于展示复杂的项目数据和任务结构。为了更高效地管理项目，可以结合项目团队管理系统，如研发项目管理系统PingCode和通用项目协作软件Worktile。

1、研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理系统，支持敏捷开发、需求管理、缺陷跟踪等功能。通过动态嵌套表格，可以直观地展示项目的层级结构、任务分配和进度跟踪。

const pingcodeData = {
  projects: [
    {
      name: "Project A",
      tasks: [
        {
          name: "Task 1",
          subtasks: [
            { name: "Subtask 1.1", status: "Done" },
            { name: "Subtask 1.2", status: "In Progress" }
          ]
        },
        {
          name: "Task 2",
          subtasks: [
            { name: "Subtask 2.1", status: "Not Started" },
            { name: "Subtask 2.2", status: "Done" }
          ]
        }
      ]
    },
    {
      name: "Project B",
      tasks: [
        {
          name: "Task 1",
          subtasks: [
            { name: "Subtask 1.1", status: "In Progress" },
            { name: "Subtask 1.2", status: "Not Started" }
          ]
        }
      ]
    }
  ]
};
const pingcodeTemplate = `
  <table>
    <thead>
      <tr>
        <th>Project</th>
        <th>Task</th>
        <th>Subtask</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {{#each projects}}
      <tr>
        <td rowspan="{{this.tasks.length}}">{{this.name}}</td>
        {{#each this.tasks}}
        <td rowspan="{{this.subtasks.length}}">{{this.name}}</td>
        {{#each this.subtasks}}
        <td>{{this.name}}</td>
        <td>{{this.status}}</td>
      </tr>
      {{/each}}
      {{/each}}
      {{/each}}
    </tbody>
  </table>
`;
const pingcodeCompiledHtml = Handlebars.compile(pingcodeTemplate)(pingcodeData);
document.getElementById("table-container").innerHTML = pingcodeCompiledHtml;

2、通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。通过动态嵌套表格，可以展示团队成员的任务分配和协作情况。

const worktileData = {
  teams: [
    {
      name: "Team Alpha",
      members: [
        {
          name: "Alice",
          tasks: [
            { name: "Task 1", status: "Done" },
            { name: "Task 2", status: "In Progress" }
          ]
        },
        {
          name: "Bob",
          tasks: [
            { name: "Task 1", status: "Not Started" },
            { name: "Task 2", status: "Done" }
          ]
        }
      ]
    },
    {
      name: "Team Beta",
      members: [
        {
          name: "Charlie",
          tasks: [
            { name: "Task 1", status: "In Progress" },
            { name: "Task 2", status: "Not Started" }
          ]
        }
      ]
    }
  ]
};
const worktileTemplate = `
  <table>
    <thead>
      <tr>
        <th>Team</th>
        <th>Member</th>
        <th>Task</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {{#each teams}}
      <tr>
        <td rowspan="{{this.members.length}}">{{this.name}}</td>
        {{#each this.members}}
        <td rowspan="{{this.tasks.length}}">{{this.name}}</td>
        {{#each this.tasks}}
        <td>{{this.name}}</td>
        <td>{{this.status}}</td>
      </tr>
      {{/each}}
      {{/each}}
      {{/each}}
    </tbody>
  </table>
`;
const worktileCompiledHtml = Handlebars.compile(worktileTemplate)(worktileData);
document.getElementById("table-container").innerHTML = worktileCompiledHtml;

通过结合项目团队管理系统，可以更高效地利用动态嵌套表格展示和管理项目数据，提升团队的协作效率和项目的可视化管理能力。