一个树形结构表格，有开关按钮，父节点按钮关闭，所有子节点也关闭，然后子节点变成禁用状态，父节点开启，取消禁用状态

以下是一个示例的HTML和JavaScript代码，用于实现这个树形结构表格：

HTML代码：

<table>
  <thead>
    <tr>
      <th>节点</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr data-parent="true">
      <td>节点A</td>
      <td>
        <button class="switch-btn">关闭</button>
      </td>
    </tr>
    <tr data-parent="false" data-parent-id="0">
      <td>子节点1</td>
      <td>
        <button class="switch-btn" disabled>关闭</button>
      </td>
    </tr>
    <tr data-parent="false" data-parent-id="0">
      <td>子节点2</td>
      <td>
        <button class="switch-btn" disabled>关闭</button>
      </td>
    </tr>
    <tr data-parent="true">
      <td>节点B</td>
      <td>
        <button class="switch-btn">关闭</button>
      </td>
    </tr>
    <tr data-parent="false" data-parent-id="3">
      <td>子节点3</td>
      <td>
        <button class="switch-btn" disabled>关闭</button>
      </td>
    </tr>
    <tr data-parent="false" data-parent-id="3">
      <td>子节点4</td>
      <td>
        <button class="switch-btn" disabled>关闭</button>
      </td>
    </tr>
  </tbody>
</table>

JavaScript代码：

// 获取所有的父节点
const parentNodes = document.querySelectorAll('[data-parent="true"]');

// 循环遍历每个父节点
parentNodes.forEach((parentNode, index) => {
  // 获取该父节点的所有子节点
  const childNodes = document.querySelectorAll(`[data-parent-id="${index}"]`);

  // 监听该父节点的开关按钮点击事件
  parentNode.querySelector('.switch-btn').addEventListener('click', () => {
    const btn = parentNode.querySelector('.switch-btn');

    // 判断按钮状态，进行相应的操作
    if (btn.textContent === '关闭') {
      btn.textContent = '开启';
      // 关闭所有子节点的开关按钮，并禁用按钮
      childNodes.forEach((childNode) => {
        childNode.querySelector('.switch-btn').textContent = '关闭';
        childNode.querySelector('.switch-btn').disabled = true;
      });
    } else {
      btn.textContent = '关闭';
      // 开启所有子节点的开关按钮，并取消禁用按钮
      childNodes.forEach((childNode) => {
        childNode.querySelector('.switch-btn').textContent = '关闭';
        childNode.querySelector('.switch-btn').disabled = false;
      });
    }
  });
});

解释：

1. HTML代码中，每个表格行（tr元素）都有一个`data-parent`属性，用于指示该行是否为父节点（值为true或false）。
2. 对于每个子节点，都有一个`data-parent-id`属性，用于指示该节点的父节点的索引。
3. JavaScript代码中，首先获取所有的父节点。
4. 循环遍历每个父节点，获取该父节点的所有子节点。
5. 监听该父节点的开关按钮点击事件，根据按钮状态进行相应的操作。
6. 如果按钮为关闭状态，则将该父节点的所有子节点的开关按钮关闭，并禁用按钮。
7. 如果按钮为开启状态，则将该父节点的所有子节点的开关按钮开启，并取消禁用按钮。