jQuery - aynı tabloda iki tablo satırları arasındaki tüm tablo satırları seçmek için nasıl

Question

bu (ihmal td) benzeri bir yapıya sahip bir tablo var

<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> 

zaman tüm satırları gizlemek için gereken satırda kullanıcı tıklayın "başlık" sınıfına sahip olan sonraki satıra kadar. Bunu başarmanın en kolay yolu ne olurdu. Bu satırlar boyunca, sınıf başlığı olan tüm satırları bulun, tıklanan satırın liste satırı dizininde bulun, aynı sınıfa sahip bir sonraki satırın satır dizinini bulun ve sonra bu iki hükmün içindeki tüm satırları seçin.

Answer 1

Sen gibi bir şey deneyebilirsiniz) tıklanan satırda ve kaldırmak istediğiniz satırları bulmak için her iki yönde hareket ettirin. sadece başlık satırlarına gittiğinizde durun.

<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> 

Sonra bu basit çizgi yapacağız: Bu şekilde tablo yapısını değiştirebilir Eğer böyle yapmak

Answer 2

Sen tıpkı olabilir:

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

Yoksa birden fazla böyle ayrımları varsa: Eğer başlığı arasındaki tüm satırları gizlemek istediğiniz varsayarsak

$('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

zaman bu aralıktaki bir satır tıklatıldı:

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

Bu, önceki/sonraki kardeşler üzerinde yinelenen (satırlar), gizleniyor Her biri header sınıfı ile başka bir satır ile karşılaşana kadar. return false her bir döngüyü sonlandıracaktır. satır gösterme Firefox 3.

Sorumlu işlevinde Test başlığı tıklandığında: Ben önümüzdeki kullanarak çalışacaktı

$(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

() ve 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

(o başlıkların 2 seviyelerini destekler)

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

Başlık satırını tıklattığınızda bir satırdaki tüm satırları değiştirmek isterseniz (stuck kullandığım kullanım durumum buydu) Bu soruya istinaden):

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