隐藏表格列，其中应用了 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

这可以通过 CSS 使用 :not() 和 + 选择器来完成：

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

JSFiddle demo.

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

在您的表格中，这将隐藏内容为C、3 和4 的单元格。

更新

作为 BoltClock mentioned in comments，上述 CSS 将针对在 tr 中找到的任何 :nth-child(n)。为了确保这仅针对 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.