如何使用JavaScript实现类似finereport的动态展开N阶Table和Row功能？

const data = [
  { name: '一级目录1', children: [
    { name: '二级目录1.1', children: [{ name: '三级目录1.1.1' }] },
    { name: '二级目录1.2' }
  ] },
  { name: '一级目录2', children: [{ name: '二级目录2.1' }] }
];

function renderTable(data, parentElement) {
  const table = document.createElement('table');
  parentElement.appendChild(table);

  function renderRow(item, level) {
    const row = table.insertRow();
    const cell = row.insertCell();
    cell.textContent = item.name;
    cell.style.paddingLeft = level * 20 + 'px'; // 缩进

    if (item.children && item.children.length > 0) {
      const button = document.createElement('button');
      button.textContent = '+';
      button.onclick = () => toggleRow(button, item);
      cell.appendChild(button);
    }
  }

  function toggleRow(button, item) {
    button.textContent = button.textContent === '+' ? '-' : '+';
    const nextSibling = button.parentNode.parentNode.nextSibling;
    if (nextSibling && nextSibling.classList.contains('child-row')) {
      nextSibling.remove();
    } else {
      const newRow = table.insertRow();
      newRow.classList.add('child-row');
      item.children.forEach(child => renderRow(child, button.parentNode.cellIndex + 1));
    }
  }

  data.forEach(item => renderRow(item, 0));
}

const container = document.getElementById('table-container');
renderTable(data, container);