如何使用jQuery切换ASP.NET GridView中列的显示与隐藏？

现有示例的问题 #

1. 示例1/2：jQuery的hide()/show()/toggle()未生效，核心原因是代码执行时机错误——在DOM元素加载完成前就执行了jQuery代码，导致无法选中.colDefinition元素。另外，show()会将元素display设为block，但表格单元格（<th>/<td>）的默认display是table-cell，强行设为block会破坏表格布局。
2. 示例3：逻辑错误——点击Show按钮时，你尝试移除colDefinitionShow类，但这个类从未被添加过；同时colDefinitionShow样式设置为display:block，不符合表格单元格的布局要求。

修正后的解决方案 #

1. 修正CSS样式

将colDefinitionShow的display改为table-cell，匹配表格单元格的默认布局：

.colDefinitionHide {
    display: none;
}

.colDefinitionShow {
    display: table-cell;
}

2. 确保jQuery代码在DOM加载完成后执行

所有jQuery操作必须包裹在$(document).ready()中，确保能正确选中页面元素：

方案A：手动控制添加/移除类

$(document).ready(function() {
    $("#hide").click(function () {
        $(".colDefinition").addClass("colDefinitionHide").removeClass("colDefinitionShow");
    });

    $("#show").click(function () {
        $(".colDefinition").removeClass("colDefinitionHide").addClass("colDefinitionShow");
    });
});

方案B：使用toggle()简化切换逻辑（推荐）

如果只需要切换显示/隐藏，直接用toggle()更简洁，jQuery会自动处理表格单元格的display属性：

$(document).ready(function() {
    $("#hide").click(function () {
        $(".colDefinition").hide();
    });

    $("#show").click(function () {
        $(".colDefinition").show();
    });

    // 也可以用单个按钮实现一键切换
    // $("#toggleCol").click(function () {
    //     $(".colDefinition").toggle();
    // });
});

3. 额外检查项

• 确认页面已正确引入jQuery库（浏览器控制台输入$，返回函数则说明加载成功）。
• ASP.NET GridView生成的HTML中，HeaderStyle-CssClass会绑定到<th>标签，ItemStyle-CssClass会绑定到<td>标签，.colDefinition选择器能正确选中这些元素，无需担心类名被重写。

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