如何通过jQuery点击按钮隐藏表格指定列？附现有代码

没问题！我来帮你搞定这个需求——点击按钮就能切换表格里对应列的显示状态。结合你给出的现有代码，用jQuery可以轻松实现，下面是具体的方案：

核心思路 #

给每个按钮绑定点击事件，通过按钮的data-value属性获取要切换的列的类名，然后控制对应类名的表头（<th>）和单元格（<td>）的显示/隐藏。如果需要互斥切换（比如点lt只显示lt列，点en只显示en列），可以先显示所有列，再隐藏非目标列。

完整实现代码 #

首先确保页面引入了jQuery（如果还没加，在页面头部或者表格下方加上），然后添加事件处理代码：

<div>
  <a class="button" data-value="lt">lt</a>
</div>
<div>
  <a class="button" data-value="en">en</a>
</div>
<table>
  <tr>
    <th>ID</th>
    <th class="lt">Code lt</th>
    <th style="display:none;" class="en">Code en</th>
    <th class="lt">Value lt</th>
    <th style="display:none;" class="en">Value en</th>
  </tr>
  <tr>
    <td>ID</td>
    <td class="lt">c...</td>
    <td class="en">e...</td> <!-- 补上en对应的单元格，不然切换后看不到内容 -->
  </tr>
</table>

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  // 给所有按钮绑定点击事件
  $('.button').on('click', function() {
    // 获取当前按钮对应的列类名
    var targetClass = $(this).data('value');
    
    // 方案1：切换目标列的显示/隐藏（显示变隐藏，隐藏变显示）
    // $('th.' + targetClass + ', td.' + targetClass).toggle();
    
    // 方案2：互斥切换——只显示目标列，隐藏其他列（保留ID列）
    $('th, td').show(); // 先显示所有列
    // 隐藏非目标类的列，排除第一列（ID列）
    $('th:not(.' + targetClass + ', :first-child), td:not(.' + targetClass + ', :first-child)').hide();
  });
});
</script>

代码解释 #

• $(document).ready()：确保DOM加载完成后再执行代码，避免找不到元素。
• $('.button').on('click', ...)：给所有带.button类的按钮绑定点击事件。
• $(this).data('value')：获取当前点击按钮的data-value值（也就是lt或en），用来定位对应的列。
• 方案1的toggle()：切换目标列的显示状态，适合需要来回切换单列显示/隐藏的场景。
• 方案2的互斥逻辑：先显示所有列，再隐藏非目标类的列（同时保留ID列），适合需要切换不同语言列的场景，和你初始隐藏en列的需求更匹配。

另外注意：你的现有代码里第二行表格行的en列单元格缺失了，我在示例里补上了，不然切换到en列的时候看不到内容哦～

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