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

HTML 表格是 Web 页面中经常使用的元素之一。通常，我们会在表格中展示大量数据，然而有时候，这些数据会使得页面看起来拥挤不堪，因此我们需要一种方式来隐藏部分数据，让用户点击后展开。

下面，我们将借助 JavaScript 来实现这个功能。

前置知识

在开始之前，需要先了解以下知识点：

• HTML 标记
• CSS 样式
• JavaScript 事件监听及 DOM 操作

实现思路

我们将通过以下步骤来实现表格展开的功能：

1. 使用 HTML 和 CSS 创建基础的表格框架
2. 添加 JavaScript 事件监听，当用户点击某一行时，显示该行对应的详细信息
3. 根据需要，使用 JavaScript 调整行的样式以区分展开和未展开状态

代码实现

HTML

我们先来创建一个简单的 HTML 表格，其中每一行都包含几个单元格，其中一个单元格包含需要展开的详细信息。为了方便，我们用 CSS 将详细信息隐藏起来。

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>23</td>
      <td>北京市海淀区</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>25</td>
      <td>上海市浦东新区</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td>广州市天河区</td>
    </tr>
    <tr>
      <td>4</td>
      <td>赵六</td>
      <td>30</td>
      <td>深圳市南山区</td>
    </tr>
    <tr class="expand">
      <td>5</td>
      <td>小明</td>
      <td>21</td>
      <td>成都市高新区</td>
      <td class="details" colspan="4">
        <p>详细信息：</p>
        <ul>
          <li>电话：123456789</li>
          <li>邮箱：xiaoming@example.com</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

CSS

接下来，我们使用 CSS 将表格的详细信息隐藏起来。具体来说，我们会将包含详细信息的单元格设为跨度为表格列数的 colspan，然后将其中的文本设为透明。

tr.expand .details {
  background-color: #f1f1f1;
  border: 1px solid #ddd;
}

tr.expand .details p {
  margin: 0;
}

tr.expand .details ul {
  margin: 0;
  padding: 0;
}

tr.expand .details li {
  list-style: none;
  margin: 0;
  padding: 5px;
}

tr.expand .details * {
  opacity: 0;
}

JavaScript

最后，我们使用 JavaScript 实现表格展开的功能。具体来说，我们会通过事件委托的方式，为表格的每一行添加点击事件监听器。

当用户点击某一行时，我们会检查该行是否已经展开。如果已经展开，我们就将详细信息单元格中的内容隐藏起来，并修改行的样式以反映未展开状态。如果尚未展开，我们就将详细信息单元格中的内容显示出来，并修改行的样式以反映展开状态。

// 获取表格元素
const table = document.querySelector("table");

// 为表格添加事件委托
table.addEventListener("click", (event) => {
  // 获取用户点击的行
  const row = event.target.closest("tr");

  // 如果行已经展开，则收起详细信息
  if (row.classList.contains("expand")) {
    const details = row.querySelector(".details");
    details.querySelectorAll("*").forEach((el) => (el.style.opacity = 0));
    row.classList.remove("expand");
  }
  // 如果行尚未展开，则显示详细信息
  else {
    const details = row.querySelector(".details");
    details.querySelectorAll("*").forEach((el) => (el.style.opacity = 1));
    row.classList.add("expand");
  }
});

总结

至此，我们已经学会了如何使用 JavaScript 实现 HTML 表格的展开功能。该功能可以帮助我们更好地组织大量的数据，让用户能够更加直观地了解数据的精细内容。同时，该功能还可以增加页面的交互性，提高用户的体验感。