如何使用 JavaScript 使 HTML 表格在点击时展开？

HTML 表格可用于以表格形式显示数据。然而，在某些情况下，表格可能会很长，需要水平滚动才能查看所有数据。这可能会影响用户体验，因为用户需要不断地在水平滚动条上下滑动。为了解决这个问题，可以使用 JavaScript 和 CSS 来实现一个可展开的表格，用户可以通过点击标题来展开和收起表格数据。

HTML 结构

我们使用以下 HTML 结构来创建可展开的表格：

<table>
  <thead>
    <tr>
      <th>标题 1</th>
      <th>标题 2</th>
      <th>标题 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1-1</td>
      <td>数据 1-2</td>
      <td>数据 1-3</td>
    </tr>
    <tr class="expandable">
      <td colspan="3">
        <table>
          <thead>
            <tr>
              <th>子标题 1</th>
              <th>子标题 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>子数据 1-1</td>
              <td>子数据 1-2</td>
            </tr>
            <tr>
              <td>子数据 2-1</td>
              <td>子数据 2-2</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>数据 2-1</td>
      <td>数据 2-2</td>
      <td>数据 2-3</td>
    </tr>
  </tbody>
</table>

在这个结构中，我们使用了一个包含头部和身体的标准 HTML 表格。在身体部分，我们为可展开行添加了一个 expandable 类。这一行包含一个 colspan 属性为 3 的单元格，其中包含了一个新的表格，用于显示子级数据。

CSS 样式

我们使用以下 CSS 样式来隐藏可展开行的子级表格：

table.expanded {
  display: table-row-group;
}
tr.expandable > td > table {
  display: none;
}

在表格初始化时，可展开行的子级表格将处于隐藏状态。当用户点击可展开行的标题时，子级表格将切换为可见状态。

JavaScript 代码

我们使用以下 JavaScript 代码来实现可展开行的交互：

// 获取所有可展开行的 DOM 元素
var expandableRows = document.querySelectorAll('table tr.expandable');

// 为每个可展开行添加点击事件处理函数
expandableRows.forEach(function(row) {
  var toggleButton = row.querySelector('th, td');
  toggleButton.addEventListener('click', function() {
    // 切换表格的展开状态
    row.classList.toggle('expanded');
  });
});

在这个代码片段中，我们选择所有具有 expandable 类的表格行，并为每个行添加点击事件处理函数。当用户点击行上的任何单元格时，代码将切换 expanded 类的状态，从而触发 CSS 样式的更改，显示或隐藏子级表格。

结论

通过结合 HTML、CSS 和 JavaScript，我们可以创建一个可展开的 HTML 表格，使用户可以在单击行标题时查看和隐藏子级数据。这种交互的实现将提高用户体验和数据可视性，为用户提供更加丰富和方便的数据浏览体验。