如何在jQuery中隐藏表列？

Question

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

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

Answer 1

尝试：

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

这是一个非常基本的版本 - 它假设您的表不使用<TH>元素或具有可变列跨度，但基本概念就在那里。请注意nth-child uses 1-based indexing。我在最新阶段增加了1来弥补这一点。

Answer 2

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

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

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