HTML 如何创建一个可折叠的树形表格（HTML/CSS/JS）

在本文中，我们将介绍如何在HTML、CSS和JavaScript中创建一个可折叠的树形表格。

阅读更多：HTML 教程

创建基本的HTML结构

首先，我们需要创建一个基本的HTML结构，用来放置树形表格的内容。我们可以使用<table>标签来创建表格，使用<tr>和<td>标签来定义行和单元格。为了实现可折叠的功能，我们还需要使用一些<button>标签来作为折叠按钮。

下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Collapsing Tree Table</title>
  <style>
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>
        <button>+</button> Parent Node 1
        <table class="hide">
          <tr>
            <td>Child Node 1</td>
          </tr>
          <tr>
            <td>Child Node 2</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <button>+</button> Parent Node 2
        <table class="hide">
          <tr>
            <td>Child Node 3</td>
          </tr>
          <tr>
            <td>Child Node 4</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <script>
    var buttons = document.querySelectorAll('button');

    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function() {
        var table = this.nextElementSibling;
        table.classList.toggle('hide');

        if (table.classList.contains('hide')) {
          this.textContent = '+';
        } else {
          this.textContent = '-';
        }
      });
    }
  </script>
</body>
</html>

在上面的示例中，我们创建了一个简单的树形表格，其中包含两个父节点和每个父节点下有两个子节点。每个父节点都有一个折叠按钮，初始状态下子节点的表格是隐藏的。

添加CSS样式

为了使树形表格更具可读性，我们可以添加一些CSS样式来美化表格和按钮。在上述示例中，我们已经为.hide类添加了样式，用来隐藏子节点的表格。此外，我们还可以为按钮和表格添加一些样式，以增加可视效果。

下面是一个示例的CSS代码：

table {
  border-collapse: collapse;
  width: 100%;
}

button {
  padding: 5px 10px;
  background-color: #f1f1f1;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

td {
  padding: 8px;
}

.hide {
  display: none;
}

你可以根据自己的喜好和需求对CSS样式进行修改和调整。

添加JavaScript交互

在上面的示例代码中，我们使用了JavaScript来实现树形表格的折叠和展开功能。我们通过添加事件监听器来为每个按钮绑定点击事件，并在事件处理函数中通过操作DOM来切换子节点的可见性并更新按钮的文本内容。

在示例代码中，我们使用了document.querySelectorAll('button')方法来获取所有的按钮元素，并为每个按钮添加了点击事件。当按钮被点击时，我们通过nextElementSibling属性找到它的下一个兄弟元素，即子节点的表格，然后通过classList.toggle('hide')方法来切换表格的可见性。最后，通过判断表格的可见性来更新按钮的文本内容。

你可以根据需要对JavaScript代码进行修改和扩展，以实现更多自定义功能。