隐藏表格列，应用了colspan ......？

Question

我读了很多问题但与我的情况不符。 这是我的表结构

如果我想隐藏代码下面的 A 或 B 列

$('table td:nth-child(1),table th:nth-child(1)').hide();
$('table td:nth-child(2),table th:nth-child(2)').hide();

但是，如果我想删除 C 或更高版本的列，则会给我带来问题。 像下面的代码给了我非相关输出。

$('table td:nth-child(3),table th:nth-child(3)').hide();

请找到这个Link

的小提琴

Answer 1

纯CSS

可以使用:not()和+选择器使用CSS完成此操作：

tr :nth-child(3),
tr :nth-child(3):not([colspan]) + :nth-child(4) {
    display: none;
}

JSFiddle demo

这样做是隐藏第3个孩子，然后隐藏第3个孩子之前没有colspan属性的元素。

在您的表格中，这会隐藏包含C，3和4内容的单元格。

更新

作为BoltClock mentioned in comments，上述CSS会定位:nth-child(n)中找到的任何tr。为确保仅针对td或th元素，我们可以引入子组合子（>）：

tr > :nth-child(3),
tr > :nth-child(3):not([colspan]) + :nth-child(4) {
    display: none;
}

如果您的td或th元素包含自己的子元素，则需要使用此功能。

的jQuery

使用jQuery，您可以遍历每个tr元素，确定第一行的匹配th元素是否具有colspan属性，然后进行相应处理。在这里，我将其包含在一个名为hideColumn()的函数中，该函数接受与您要隐藏的列相关的 n 参数：

$(function() {
    function hideColumn(n) {
        var headerColSpan = 1;

        $('tr').each(function(i) {
            var nth = $(this).children()[n-1],
                colspan = $(nth).attr('colspan');

            // Pull ColSpan from first row th element
            if (i === 0)
                headerColspan = colspan || 1;

            if (colspan === headerColspan)
                $(nth).hide();
            else
                for (i=0; i < headerColspan; i++) {
                    $($(this).children()[n-1+i]).hide();
                }
        });
    }

    hideColumn(3);
});

JSFiddle demo