js实现树形表格

<table id="treeTable">
  <tr>
    <th>名称</th>
    <th>值</th>
  </tr>
</table>

const data = [
  { name: '节点1', value: '值1', children: [
    { name: '子节点1-1', value: '值1-1' },
    { name: '子节点1-2', value: '值1-2' }
  ]},
  { name: '节点2', value: '值2' }
];

function createTreeTable(data, parentElement) {
  data.forEach(item => {
    const row = document.createElement('tr');
    const nameCell = document.createElement('td');
    const valueCell = document.createElement('td');

    nameCell.textContent = item.name;
    valueCell.textContent = item.value;

    row.appendChild(nameCell);
    row.appendChild(valueCell);
    parentElement.appendChild(row);

    if (item.children) {
      const expandIcon = document.createElement('span');
      expandIcon.textContent = '+';
      expandIcon.style.marginRight = '5px';
      nameCell.insertBefore(expandIcon, nameCell.firstChild);

      expandIcon.addEventListener('click', (event) => {
        event.stopPropagation();
        const childTable = document.createElement('table');
        childTable.style.display = 'none';
        createTreeTable(item.children, childTable);
        row.parentNode.insertBefore(childTable, row.nextSibling);
        expandIcon.textContent = childTable.style.display === 'none' ? '-' : '+';
        childTable.style.display = childTable.style.display === 'none' ? 'table-row-group' : 'none';
      });
    }
  });
}

const table = document.getElementById('treeTable');
createTreeTable(data, table);