使用JavaScript或CSS实现HTML表格多列的显示/隐藏（基于checkbox）

嘿，这个需求我太熟了！之前帮好几个项目做过类似的功能，用纯CSS就能搞定，完全不用依赖JavaScript，轻量又好维护。如果需要更灵活的逻辑，也给你准备了JS版本，一起来看看吧。

纯CSS实现方案（推荐，无JS依赖） #

这个方案的核心思路是利用CSS的:checked伪类和兄弟选择器，把checkbox的状态和表格列的显示状态绑定起来。

完整代码示例 #

<!-- 控制开关 -->
<div class="column-controls">
  <label>
    <input type="checkbox" id="show-beer" checked>
    显示Beer相关列
  </label>
  <label>
    <input type="checkbox" id="show-wine" checked>
    显示Wine相关列
  </label>
</div>

<!-- 表格 -->
<table border="1">
  <thead>
    <tr>
      <th>产品ID</th>
      <th class="beer-col">Beer品牌</th>
      <th class="beer-col">Beer单价</th>
      <th class="beer-col">Beer库存</th>
      <th class="wine-col">Wine品牌</th>
      <th class="wine-col">Wine单价</th>
      <th class="wine-col">Wine库存</th>
      <th>备注</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td class="beer-col">Budweiser</td>
      <td class="beer-col">$5</td>
      <td class="beer-col">120</td>
      <td class="wine-col">Chardonnay</td>
      <td class="wine-col">$12</td>
      <td class="wine-col">80</td>
      <td>热销款</td>
    </tr>
    <tr>
      <td>002</td>
      <td class="beer-col">Heineken</td>
      <td class="beer-col">$6</td>
      <td class="beer-col">90</td>
      <td class="wine-col">Cabernet Sauvignon</td>
      <td class="wine-col">$15</td>
      <td class="wine-col">60</td>
      <td>新品</td>
    </tr>
  </tbody>
</table>

<style>
/* 未勾选时隐藏对应列 */
#show-beer:not(:checked) ~ table .beer-col {
  display: none;
}
#show-wine:not(:checked) ~ table .wine-col {
  display: none;
}

/* 勾选时显示对应列（默认checked所以初始显示） */
#show-beer:checked ~ table .beer-col,
#show-wine:checked ~ table .wine-col {
  display: table-cell;
}

/* 美化一下控制开关和表格 */
.column-controls {
  margin-bottom: 10px;
}
.column-controls label {
  margin-right: 20px;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 8px;
  text-align: left;
}
</style>

关键逻辑解释 #

1. HTML结构关联：给每个控制checkbox设置唯一id，对应的列添加统一的类名（比如beer-col），并且确保checkbox和表格是兄弟元素（这样CSS选择器能生效）。
2. CSS选择器魔法：用#show-beer:checked ~ table .beer-col这个选择器，意思是“当id为show-beer的checkbox被勾选时，选中后面的table里所有带beer-col类的元素”，然后设置display: table-cell显示它们；未勾选时则设置display: none隐藏。
3. 用户体验优化：把checkbox包裹在<label>里，这样点击文字也能触发勾选，比单独点checkbox方便多了。

JavaScript实现方案（适合复杂逻辑） #

如果你的需求更复杂（比如需要联动其他元素、动态生成列等），用JavaScript会更灵活。

完整代码示例 #

<div class="column-controls">
  <label>
    <input type="checkbox" class="column-toggle" data-target="beer-col" checked>
    显示Beer相关列
  </label>
  <label>
    <input type="checkbox" class="column-toggle" data-target="wine-col" checked>
    显示Wine相关列
  </label>
</div>

<table border="1" id="product-table">
  <!-- 表格内容和上面一致，此处省略重复代码 -->
</table>

<script>
// 获取所有控制开关
const toggles = document.querySelectorAll('.column-toggle');
// 获取目标表格
const table = document.getElementById('product-table');

// 给每个开关绑定切换事件
toggles.forEach(toggle => {
  toggle.addEventListener('change', function() {
    const targetClass = this.dataset.target;
    // 获取所有对应类名的表格列
    const columns = table.querySelectorAll(`.${targetClass}`);
    // 根据勾选状态切换显示/隐藏
    columns.forEach(col => {
      col.style.display = this.checked ? 'table-cell' : 'none';
    });
  });
});
</script>

JS方案优势 #

• 不需要严格的HTML结构（checkbox和表格可以不在同一个父元素下）
• 可以轻松扩展逻辑，比如添加“全选/全不选”按钮，或者根据其他条件动态控制列的显示
• 适合动态生成的表格（比如从后端加载数据的场景）

不管用哪种方案，都能完美实现你要的“勾选显示对应多列，取消则隐藏”的效果，根据你的实际需求选就行~

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