Question

I have a table that has structure like this (td omitted)

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

When user click on the row I need to hide all rows up to the next row that has class “header”.
What would be the easiest way to achieve this. Something along these lines, find all rows that have class header, find in the list row index of the clicked row, find the row index of the next row with the same class, and then select all rows within these two indicies?

Answer 1

You could try something like:

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