如何通过按钮切换列显隐并动态调整<th>的colspan属性值

现有7个按钮，点击可切换对应表格列的显示/隐藏（点击一次隐藏，再次点击显示）。需要实现：隐藏1列时，<th>的colspan改为6；隐藏2列时改为5，以此类推。已完成列切换的jQuery代码和修改colspan的基础函数，但不知道如何整合逻辑。

先修正代码中的核心问题 #

1. 合并重复的$(document).ready代码块，减少冗余
2. 页面中不能存在重复id，将所有<th>的id="myTd"改为class="header-th"
3. 统一处理按钮点击事件，避免编写7段重复逻辑

整合colspan自动计算逻辑 #

核心思路：每次切换列的显示状态后，统计被隐藏的列数量，再计算表头的目标colspan值：7 - 隐藏列数

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 统一绑定所有隐藏按钮的点击事件
    $('button[id^="hide"]').click(function(){
        // 获取当前按钮对应的列类名（如hide1对应col1）
        var colClass = '.col' + this.id.replace('hide', '');
        // 切换对应列的显示状态
        $(colClass).toggle();
        // 实时更新表头的colspan
        updateColspan();
    });

    // 计算并更新所有表头colspan的函数
    function updateColspan(){
        var hiddenCount = 0;
        // 遍历7列，统计被隐藏的列数量
        for(var i=1; i<=7; i++){
            if($('.col' + i).is(':hidden')){
                hiddenCount++;
            }
        }
        // 计算目标colspan值
        var targetColspan = 7 - hiddenCount;
        // 批量更新所有表头的colspan属性
        $('.header-th').attr('colspan', targetColspan);
    }
});
</script>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th class="header-th" colspan="7">abcd</th>
    <th class="header-th" colspan="7">abcd</th>
    <th class="header-th" colspan="7">abcd</th>
    <th class="header-th" colspan="7">abcd</th>
  </tr>
  <tr>
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
     
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
  </tr>
  <!-- 其余表格行略 -->
</table>
<br> 

<button id="hide1">1</button>
<button id="hide2">2</button>
<button id="hide3">3</button>
<button id="hide4">4</button>
<button id="hide5">5</button>
<button id="hide6">6</button>
<button id="hide7">7</button>

</body>
</html>

代码说明 #

• 用$('button[id^="hide"]')批量选择所有隐藏按钮，统一绑定点击事件，避免重复代码
• 通过按钮id推导对应列的类名，实现列的显示/隐藏切换
• updateColspan函数实时统计隐藏列数，自动计算并更新所有表头的colspan值
• 将重复的id改为class，确保可以批量操作所有表头

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