Question

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

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

看一下简单的例子： http://jsfiddle.net/SEwVP/

有什么想法吗？

Answer 1

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

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

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

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

Answer 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();
  });

JQuery使用rowspan隐藏表列

2 个答案: