jQueryの - 私はこのような構造を持つテーブルを持っているか、同じテーブル内の2つのテーブルの行の間のすべてのテーブルの行を選択するために

Question

（TDは省略）

<table> 
<tr class="header">...</tr> 
<tr class="row">...</tr> 
<tr class="row">...</tr> 
<tr class=="header">...</tr> 
<tr class="row">...</tr> 
<tr class="row">...</tr> 
</table> 

行上のユーザーのクリックが、私はすべての行を非表示にする必要がありますクラス "ヘッダー"を持つ次の行までです。 これを達成する最も簡単な方法は何でしょうか？これらの行に沿って、クラスヘッダーを持つすべての行を見つけ、クリックされた行のリスト行インデックスで検索し、同じクラスを持つ次の行の行インデックスを見つけて、これらの2つのインデックス内のすべての行を選択します。

Answer 1

：Firefoxの3ヘッダーをクリックしたときに、行を表示する機能を対応

でテスト）をクリックし、両方の方向をたどって削除する行を探します。ヘッダー行に移動すると停止します。

が

<table> 
    <tbody> 
    <tr class="header">...</tr> 
    <tr class="row">...</tr> 
    <tr class="row">...</tr> 
    </tbody> 
    <tbody> 
    <tr class=="header">...</tr> 
    <tr class="row">...</tr> 
    <tr class="row">...</tr> 
    </tbody> 
</table> 

はその後、このシンプルなラインが行います：あなたはこれにあなたのテーブル構造を変更することができる場合、私はこのようにそれを行う

Answer 2

あなたはやるだけのことができます：

$('table tr.row').hide(); 

それとも、複数のそのような分離を持っている場合：あなたがヘッダ間のすべての行を非表示にすると仮定すると、

$('table tr.header').click(function(){ 
    var rowsToHide = []; 
    var trs = $('table tr'); 
    //let's get the index of the tr clicked first. 
    var idx = trs.index(this); 
    //now loop untill next header 
    for(var i = idx+1; i < trs.length; i++){ 
     if(trs[i].attr('class') == 'row'){ 
      rowsToHide.push(trs[i]); 
     } else { 
      break; 
     } 
    } 

    // now hide the array of row elements 
    $(rowsToHide).hide(); 
}) 

Answer 3

をするとき、その範囲内の行

$('table tr.row').click(function() { 
    $(this).hide(); 
    $(this).prevAll('tr').each(function() { 
     if ($(this).hasClass('header')) { 
      return false; 
     } 
     $(this).hide(); 
    }); 
    $(this).nextAll('tr').each(function() { 
     if ($(this).hasClass('header')) { 
      return false; 
     } 
     $(this).hide(); 
    }); 
}); 

これは、前/次の兄弟（行）、隠蔽それぞれがクラスheaderの別の行に出会うまでreturn falseは各ループを終了します。

$(document).ready($('table tr').click(
    function() { 
    var tr = $(this).nextAll('tr'); 
    for (i = 0; i < tr.length; i++) { 
     var class = $(tr[i]).attr('class'); 
     if (class == 'row') 
     $(tr[i]).hide() 
     else { 
     if (class == 'header') 
      return; 
     } 
    } 
    } 
)); 

Answer 4

私は（次を使用して試してみた）とPREV（：あなたが何かを試みることができる

$('table tr.header').click(function() { 
    $(this).nextAll('tr').each(function() { 
     if ($(this).hasClass('header')) { 
      return false; 
     } 
     $(this).show(); 
    }); 
}); 

Answer 5

は

function toggleCollapse(source, destinationClass) { 
    var isHidden = source.hasClass('collapsed'); 
    var current = source; 
    while (true) { 
     current = current.next("tr:visible"); 

     if (current.length == 0 || current.hasClass(destinationClass)) 
      break; 

     if (current.hasClass("level2grp")) 
      toggleCollapse(current, "level2grp") 

     if (isHidden) 
      current.show(); 
     else 
      current.hide(); 
    } 

    source.toggleClass('collapsed'); 
} 

Answer 6

（それは、ヘッダーの2つのレベルをサポートしています）

$('.row').click(function(){ 
    $(this).nextAll('tr').hide(); 
}); 

ヘッダー行をクリックしたときにセクション内のすべての行を切り替える場合は、

$('.header').click(function(){ 
    $(this).nextAll('tr').toggle(); 
});