JQuery 用行跨度隐藏表列答案

【问题标题】：JQuery hide table columns with rowspanJQuery 用行跨度隐藏表列
【发布时间】：2013-03-28 19:09:38
【问题描述】：

我想隐藏一个表格列，但是在具有 rowspan 属性的列上使用 jQuery .hide() 或 .toggle() 似乎将该属性“传递”到前一行并弄乱了表格。

$('#toggle').click(function(){
    $('#tbl td:last-child').toggle();
});

看看这个简单的例子： http://jsfiddle.net/SEwVP/

有什么想法吗？

【问题讨论】：

确切的逻辑标准是什么？列索引？你的专栏不处理不同的数据吗？
尝试使用可见性属性 css
您的 jquery 表现正常，但由于行中有不同数量的 td，这就是为什么当您隐藏最后一个子项时，您会在每行中看到不同数量的单元格
@user1768401：检查我的答案

标签： jquery html-table hide

【解决方案1】：

最后一个td 可能属于不同的列，这很正常。

在这种只有最后一列包含行跨度的情况下，您可以使用子索引：

$('#toggle').click(function(){
    $('#tbl td:nth-child(5)').toggle();
});

如果您想要一个有效的解决方案，如果您在任何列中都有行跨度，那么您可能必须为每个单元格预先计算其实际列索引。这是可行的，但使用更简单的解决方案可能更合理，比如根据数据创建一个类。因此，这将取决于您的表格的语义和生产过程。

【讨论】：

“最后一个 td 可能是不同的列，所以这很正常。” 当然，它必须是简单合理的东西！

【解决方案2】：

感谢@dystroy 的意见。

根据他的回答，以下是简单的解决方案：

var lastChilds = $('#tbl td:last-child');
lastChilds.each(function(i){
    var rowSpan = $(this).attr('rowspan');
    if(rowSpan !== undefined){
      lastChilds.splice(i+1, rowSpan-1);
    }
    $(this).hide();
  });

【讨论】：