JQuery - как выбрать все строки таблицы между двумя строками таблицы в одной таблице

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>

Когда пользователь нажимает на строку, мне нужно скрыть все строки до следующей строки, у которой есть класс "header". Что было бы самым простым способом добиться этого. Что-то вроде этих строк, найти все строки, которые имеют заголовок класса, найти в индексе строки списка выбранной строки, найти индекс строки следующей строки с тем же классом, а затем выбрать все строки в этих двух признаках?

Answer 1

Вы можете попробовать что-то вроде:

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

Предполагая, что вы хотите скрыть все строки между заголовками при щелчке строки в этом диапазоне:

$('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 завершит каждый цикл. Протестировано в Firefox 3.

Соответствующая функция для отображения строк при нажатии на заголовок:

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

Answer 3

Вы могли бы просто сделать:

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

Если вы можете изменить структуру таблицы следующим образом:

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

Тогда эта простая строка будет делать:

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

Если вы хотите переключать все строки в разделе, когда нажимаете на строку заголовка (это был мой случай использования, когда я наткнулся на этот вопрос):

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

Answer 5

Я делаю это так (поддерживает 2 уровня заголовков)

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

Я бы попробовал использовать next () и prev () в строке, по которой щелкнули, и обойти оба направления, чтобы найти, какие строки вы хотите удалить. просто остановитесь, когда доберетесь до строк заголовка.