如何在 jQuery 中隐藏表格列?

发布于 2024-08-27 16:32:47 字数 180 浏览 10 评论 0原文

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

隐藏(使用 .hide())每行中的每个 td 是否有效?也许我可以将复选框值分配给表中列的位置。所以第一个复选框意味着第一列,依此类推。然后递归地隐藏每行中的“编号”td。那行得通吗?

I've a table with lots of columns. I want to give users the option to select columns to be shown in table. These options would be checkboxes along with the column names. So how can I hide/unhide table columns based on checkboxes?

Would hiding (using .hide()) each td in each row work? May be I can assign checkbox value to the location of column in table. So first checkbox means first column and so on. And then recursively hide that 'numbered' td in each row. Would that work?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

酒与心事 2024-09-03 16:32:47

尝试:

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

这是一个非常基本的版本 - 它假设您的表格不使用 元素或具有可变的列跨度,但基本概念已经存在。请注意,nth-child 使用从 1 开始的索引。我在最近阶段添加了 1 来弥补这一点。

Try:

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

This is a pretty basic version - it assumes your table doesn't use <TH> elements or have variable column spans, but the basic concept is there. Note that nth-child uses 1-based indexing. I've added 1 at the latest stage to compensate for that.

浴红衣 2024-09-03 16:32:47

我构建了一个脚本来执行雷克斯的建议。每列中有一个复选框(或元素),单击该复选框(或元素)时,会根据第 n 个子项确定其所在列,然后隐藏每个 TR 中相同的列。

在 .hide() 之前,我添加一个可以引用以返回列的类。

我遇到的问题是我正在使用样式丰富的表,其中某些行具有跨度,并且某些 TD 根据其在行中的位置具有独特的类。我抱怨 IE 中的问题,即 IE 并不总是以正确的样式显示()隐藏的 TD。看来 IE 在重绘 TD 时遇到了麻烦。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文