当前位置：首页 > JavaScript

怎么用js实现树状表格

2026-01-31 08:44:40JavaScript

实现树状表格的 JavaScript 方法

数据结构准备

树状表格需要嵌套结构的数据，通常使用包含 children 属性的对象数组。例如：

const treeData = [
  {
    id: 1,
    name: "Parent 1",
    children: [
      { id: 2, name: "Child 1" },
      { id: 3, name: "Child 2" }
    ]
  }
];

HTML 结构搭建

创建基础的表格结构，并预留动态生成内容的容器：

<table id="treeTable">
  <thead>
    <tr><th>ID</th><th>Name</th></tr>
  </thead>
  <tbody></tbody>
</table>

递归渲染函数

通过递归遍历数据生成带缩进的表格行：

function renderTree(data, parentElement, level = 0) {
  data.forEach(item => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td style="padding-left: ${level * 20}px">${item.id}</td>
      <td>${item.name}</td>
    `;
    parentElement.appendChild(tr);

    if (item.children) {
      renderTree(item.children, parentElement, level + 1);
    }
  });
}

初始化调用

在页面加载时触发渲染：

document.addEventListener('DOMContentLoaded', () => {
  renderTree(treeData, document.querySelector('#treeTable tbody'));
});

带折叠功能的实现方案

添加折叠控制元素

修改渲染函数，为父节点添加可点击的折叠图标：

function renderCollapsibleTree(data, parentElement, level = 0) {
  data.forEach(item => {
    const tr = document.createElement('tr');
    const hasChildren = item.children && item.children.length > 0;

    tr.innerHTML = `
      <td style="padding-left: ${level * 20}px">
        ${hasChildren ? `<span class="toggle">+</span>` : ''}
        ${item.id}
      </td>
      <td>${item.name}</td>
    `;

    parentElement.appendChild(tr);

    if (hasChildren) {
      const childContainer = document.createElement('tbody');
      childContainer.classList.add('child-container');
      childContainer.style.display = 'none';
      parentElement.parentNode.insertBefore(childContainer, tr.nextSibling);

      tr.querySelector('.toggle').addEventListener('click', function() {
        const isHidden = childContainer.style.display === 'none';
        childContainer.style.display = isHidden ? '' : 'none';
        this.textContent = isHidden ? '-' : '+';
      });

      renderCollapsibleTree(item.children, childContainer, level + 1);
    }
  });
}

CSS 样式增强

添加基本样式提升用户体验：

.toggle {
  cursor: pointer;
  margin-right: 5px;
  user-select: none;
}
tr:hover {
  background-color: #f5f5f5;
}

使用现成库的方案

Tabulator 示例实现

new Tabulator("#treeTable", {
  data: treeData,
  dataTree: true,
  dataTreeStartExpanded: true,
  columns: [
    { title: "ID", field: "id" },
    { title: "Name", field: "name" }
  ]
});