jquery - JQuery 用行跨度隐藏表列

Question

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

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

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

有任何想法吗？

Answer 1

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

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

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

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

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