js 树形table-代码示例

树形表格是一种常见的网页布局方式，它可以展示层级关系的数据，让用户更直观地理解数据结构。在JavaScript中，我们可以通过动态生成HTML元素和使用递归来实现树形表格的效果。

我们需要一个包含层级关系的数据结构。假设我们有一个包含部门和员工信息的数据数组，每个员工都有一个所属的部门ID，我们可以根据这个部门ID来构建树形表格。

const data = [
  { id: 1, name: '部门A', parentId: null },
  { id: 2, name: '部门B', parentId: null },
  { id: 3, name: '员工A1', parentId: 1 },
  { id: 4, name: '员工A2', parentId: 1 },
  { id: 5, name: '员工B1', parentId: 2 },
  { id: 6, name: '员工B2', parentId: 2 },
  { id: 7, name: '员工A1-1', parentId: 3 },
];

接下来，我们可以使用递归来构建树形表格的HTML结构。我们创建一个函数`buildTree`，它接受一个父节点ID作为参数。在函数内部，我们遍历数据数组，找到所有`parentId`等于当前父节点ID的项，并将它们添加到一个新的子节点数组中。然后，我们递归调用`buildTree`函数，传入当前子节点的ID作为新的父节点ID，继续构建下一级的子节点。我们使用`innerHTML`将构建好的HTML代码插入到页面中。

function buildTree(parentId) {
  const children = data.filter(item => item.parentId === parentId);
  if (children.length === 0) {
    return '';
  }
  let html = '<ul>';
  children.forEach(child => {
    html += `<li>${child.name}</li>`;
    html += buildTree(child.id);
  });
  html += '</ul>';
  return html;
}
const treeTable = document.getElementById('treeTable');
treeTable.innerHTML = buildTree(null);

在上面的示例代码中，我们使用`filter`方法来找到所有`parentId`等于当前父节点ID的项，并使用`forEach`方法遍历这些子节点。然后，我们使用字符串模板来拼接HTML代码，并递归调用`buildTree`函数来构建下一级的子节点。我们将构建好的HTML代码插入到ID为`treeTable`的元素中。

通过以上的代码示例，我们可以看到如何使用JavaScript来实现树形表格。通过递归和动态生成HTML元素，我们可以灵活地构建出具有层级关系的表格结构，让用户更直观地理解数据。