表格内容折叠与展开
    表格是网页中最常用的数据展示形式之一。通常情况下，表格包含大量的数据内容，为了减轻用户的阅读负担和提高页面的可读性，经常需要对其中的某些数据内容进行折叠或展开。这样不仅可以优化页面布局，还可以提高页面的交互性和易用性。
    下面将分步骤介绍如何实现表格内容的折叠与展开。
    一、创建表格
    首先，在HTML文件中创建表格和表头。表格和表头的创建方式和普通表格一样，不做过多介绍。例如：
    ```
<table>
  <thead>
    <tr>
      <th>日期</th>
      <th>销售额</th>
      <th>订单数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020年1月1日</td>
      <td>10000</td>
      <td>50</td>
    </tr>
    <tr>
      <td>2020年1月2日</td>
      <td>20000</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2020年1月3日</td>
      <td>30000</td>
      <td>150</td>
    </tr>
  </tbody>
</table>
```
    二、设置内容区域
    为了实现折叠和展开，我们需要先将需要折叠和展开的内容放到一个特定的区域中。这个区域可以是一个div元素，也可以是一个td元素。在这个区域中，我们可以放置需要折叠和展开的内容。例如：
    ```
<tbody>
  <tr>
    <td>2020年1月1日</td>
    <td>10000</td>
    <td>50</td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="expand-content">
        <p>销售额明细：</p>
        <ul>
          <li>1月1日上午：5000元</li>
          <li>1月1日下午：5000元</li>
        </ul>
        <p>订单数量明细：</p>
queryselectorall用法
        <ul>
          <li>1月1日上午：25个</li>
          <li>1月1日下午：25个</li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>2020年1月2日</td>
    <td>20000</td>
    <td>100</td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="expand-content">
        <p>销售额明细：</p>
        <ul>
          <li>1月2日上午：10000元</li>
          <li>1月2日下午：10000元</li>
        </ul>
        <p>订单数量明细：</p>
        <ul>
          <li>1月2日上午：50个</li>
          <li>1月2日下午：50个</li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>2020年1月3日</td>
    <td>30000</td>
    <td>150</td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="expand-content">
        <p>销售额明细：</p>
        <ul>
          <li>1月3日上午：15000元</li>
          <li>1月3日下午：15000元</li>
        </ul>
        <p>订单数量明细：</p>
        <ul>
          <li>1月3日上午：75个</li>
          <li>1月3日下午：75个</li>
        </ul>
      </div>
    </td>
  </tr>
</tbody>
```
    三、添加JavaScript代码
    最后，我们需要添加一些JavaScript代码来实现折叠和展开。具体来说，我们需要实现以下几个功能：
    1. 给折叠和展开按钮绑定点击事件，当用户点击按钮时，展示或隐藏内容区域；
2. 当内容区域被隐藏时，需要修改折叠和展开按钮的文本，提示用户当前状态；
3. 当用户关闭一个内容区域时，需要将所有其他的内容区域也关闭。
    JavaScript代码如下所示：
    ```
// 获取所有的内容区域和折叠按钮
var expandContentList = document.querySelectorAll('.expand-content');
var expandBtnList = document.querySelectorAll('.expand-btn');
    // 给所有的折叠按钮绑定点击事件
for (var i = 0; i < expandBtnList.length; i++) {
  expandBtnList[i].addEventListener('click', function() {
    // 获取当前按钮所在的内容区域
    var expandContent = this.parentNode.querySelector('.expand-content');
    if (expandContent.style.display === 'none' || expandContent.style.display === '') {
      // 如果当前内容区域是隐藏状态，则展开
      expandContent.style.display = 'block';
      this.innerText = '收起';
      // 关闭其他所有的内容区域
      for (var j = 0; j < expandContentList.length; j++) {
        if (expandContentList[j] !== expandContent) {
          expandContentList[j].style.display = 'none';
          expandBtnList[j].innerText = '展开';
        }
      }
    } else {
      // 如果当前内容区域是展开状态，则折叠
      expandContent.style.display = 'none';
      this.innerText = '展开';
    }
  });
}
```
    通过以上代码，我们就可以实现表格内容的折叠与展开了。虽然操作略显繁琐，但是效果非常好，可以很好地提高页面的可读性和用户体验。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。