当前位置：首页 > JavaScript

怎么用js实现树状表格

2026-03-01 23:55:27JavaScript

实现树状表格的基本思路

树状表格的核心是通过递归或循环渲染嵌套结构的数据，通常结合DOM操作或前端框架（如Vue/React）实现。以下提供两种常见实现方式。

怎么用js实现树状表格

原生JavaScript实现

通过递归渲染嵌套的HTML结构，结合事件控制展开/折叠。

怎么用js实现树状表格

<!-- HTML结构 -->
<table id="treeTable">
  <thead>
    <tr><th>名称</th><th>操作</th></tr>
  </thead>
  <tbody id="treeBody"></tbody>
</table>

// 示例数据
const treeData = [
  {
    name: "父节点1",
    children: [
      { name: "子节点1-1" },
      { name: "子节点1-2" }
    ]
  },
  {
    name: "父节点2",
    children: [
      { 
        name: "子节点2-1",
        children: [{ name: "孙节点2-1-1" }]
      }
    ]
  }
];

// 渲染函数
function renderTree(data, parentElement, level = 0) {
  data.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td style="padding-left: ${level * 20}px">
        ${item.children ? '<span class="toggle">+</span>' : ''}
        ${item.name}
      </td>
      <td><button>操作</button></td>
    `;
    parentElement.appendChild(row);

    if (item.children) {
      const childRow = document.createElement('tr');
      childRow.className = 'child-container';
      childRow.style.display = 'none';
      parentElement.appendChild(childRow);

      const cell = document.createElement('td');
      cell.colSpan = 2;
      childRow.appendChild(cell);

      const nestedTable = document.createElement('table');
      cell.appendChild(nestedTable);
      renderTree(item.children, nestedTable, level + 1);

      row.querySelector('.toggle').addEventListener('click', function() {
        childRow.style.display = childRow.style.display === 'none' ? 'table-row' : 'none';
        this.textContent = this.textContent === '+' ? '-' : '+';
      });
    }
  });
}

// 初始化渲染
renderTree(treeData, document.getElementById('treeBody'));

Vue.js实现示例

利用Vue的递归组件特性更简洁地实现树状表格。

<template>
  <table>
    <thead><tr><th>名称</th></thead>
    <tbody>
      <tree-row v-for="node in treeData" :node="node" :key="node.name"></tree-row>
    </tbody>
  </table>
</template>

<script>
export default {
  components: {
    TreeRow: {
      template: `
        <tr>
          <td :style="{ paddingLeft: level * 20 + 'px' }">
            <span @click="toggle" v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
            {{ node.name }}
          </td>
        </tr>
        <tr v-if="hasChildren && isOpen">
          <td :colspan="2">
            <table>
              <tree-row 
                v-for="child in node.children" 
                :node="child" 
                :level="level + 1"
                :key="child.name"
              ></tree-row>
            </table>
          </td>
        </tr>
      `,
      props: ['node', 'level'],
      data() {
        return { isOpen: false, level: this.level || 0 }
      },
      computed: {
        hasChildren() {
          return this.node.children && this.node.children.length
        }
      },
      methods: {
        toggle() { this.isOpen = !this.isOpen }
      }
    }
  },
  data() {
    return {
      treeData: [
        /* 同前文示例数据结构 */
      ]
    }
  }
}
</script>