如何在jQuery中隐藏表列？

我有一张包含很多列的表格。 我想让用户选择要在表格中显示的列。 这些选项将是复选框以及列名称。 那么如何根据复选框隐藏/取消隐藏表格列？

隐藏（使用.hide（））每行中的每个td都有效吗？ 也许我可以将复选框值分配给表格中列的位置。 所以第一个复选框意味着第一列，依此类推。 然后递归地隐藏每行中’编号’的td。 那会有用吗？

Answer 1

尝试：

function hideColumn(columnIndex) { $('#mytable td:nth-child('+(columnIndex+1)+')').hide(); } 

这是一个非常基本的版本 – 它假设您的表不使用

元素或具有可变列跨度，但基本概念就在那里。 请注意， nth-child使用基于1的索引 。 我在最新阶段增加了1来弥补这一点。

Answer 2

我建立了一个符合Rex建议的脚本。 每个列中都有一个复选框（或元素），当单击时，根据第n个孩子确定它所在的列，然后在彼此TR中隐藏相同的列。

之前.hide（）我会添加一个我可以引用的类来返回列。

我遇到的问题是我正在处理风格很大的表，其中一些行有colspans，而一些TD根据它们在行中的位置有唯一的类。 我在IE中遇到问题，其中IE不会总是以正确的样式显示（）隐藏的TD。 IE似乎无法重新绘制TD。