基于jQuery实现多表格列的显示/隐藏功能

要实现点击按钮切换Email、Phone、Address列的显示与隐藏，我们可以通过给目标列添加统一类名，再结合JavaScript监听点击事件来切换它们的显示状态，下面是完整的实现方案：

完整代码示例 #

CSS 样式

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  padding: 5px 10px;
}

/* 定义隐藏列的样式 */
.hidden {
  display: none;
}

HTML 结构

给需要控制的表头(th)和对应的单元格(td)添加统一的类名details-column，方便后续批量选择：

<button id="toggleBtn">Hide Details</button>
<table>
  <thead>
    <th>No</th>
    <th>Full Name</th>
    <th>Nickname</th>
    <th>Age</th>
    <th>Gender</th>
    <th class="details-column">Email</th>
    <th class="details-column">Phone</th>
    <th class="details-column">Address</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Revan D. Cole</td>
      <td>Revan</td>
      <td>22</td>
      <td>Male</td>
      <td class="details-column">revan.dcole@domain.com</td>
      <td class="details-column">(+1) 123 123</td>
      <td class="details-column">D Cole Street</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mira Rosenfield</td>
      <td>Mira</td>
      <td>21</td>
      <td>Female</td>
      <td class="details-column">mira.rosenfield@domain.com</td>
      <td class="details-column">(+2) 234 234</td>
      <td class="details-column">Rose Street</td>
    </tr>
  </tbody>
</table>

JavaScript 逻辑

监听按钮的点击事件，批量切换目标列的显示状态，同时更新按钮文本提升用户体验：

const toggleBtn = document.getElementById('toggleBtn');
const detailsColumns = document.querySelectorAll('.details-column');

toggleBtn.addEventListener('click', () => {
  // 切换每一列的显示/隐藏状态
  detailsColumns.forEach(column => {
    column.classList.toggle('hidden');
  });
  
  // 更新按钮文本，让用户明确当前操作
  toggleBtn.textContent = toggleBtn.textContent === 'Hide Details' 
    ? 'Show Details' 
    : 'Hide Details';
});

实现思路说明 #

1. 统一标记目标列：给所有需要控制的表头和单元格添加details-column类，这样可以通过querySelectorAll一次性选中所有目标元素，避免逐个选择的繁琐操作。
2. 切换显示状态：使用classList.toggle('hidden')来切换元素的隐藏类——该类定义了display: none实现隐藏效果；再次点击时会自动移除该类，元素恢复默认的table-cell显示模式。
3. 优化交互体验：同步切换按钮的文本内容，让用户清晰知道当前点击会触发什么操作，避免混淆。

这个方案简单易维护，后续如果需要新增需要控制的列，只需要给对应的th和td添加details-column类即可。

内容的提问来源于stack exchange，提问作者Ervan