jquery - JQuery は、rowspan を使用してテーブルの列を非表示にします

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