jquery - 如何在 jQuery 中隐藏表格列？

Question

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

隐藏（使用 .hide()）每行中的每个 td 会起作用吗？可能我可以将复选框值分配给表中列的位置。所以第一个复选框意味着第一列等等。然后递归地隐藏每一行中的“编号”td。那行得通吗？

Answer 1

尝试：

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

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

Answer 2

I built a script that does what Rex suggests. There's a check box (or element) in each column that, when clicked, figures out which column it's in based on the nth-child and then hides the same ones in each other TR.

Before .hide() I'd add a class that I could reference to return the column.

The issue I had is I was working with heavily styled tables where some rows had colspans and some TDs had unique classes based on their position in the row. I rant into issues in IE where IE wouldn't always show() the hidden TDs with the proper styling. It seemed that IE had trouble redrawing TDs.