Question

I’ve got a table with hidden rows on it, like such

 -visible-
 -invisible-
 -visible-
 -invisible-

When I click on a table row, I want it to show the invisible row. Currently I have that using this function:

var grid = $('#BillabilityResults');
$(".tbl tr:has(td)").click(
         function () {
             $(grid.rows[$(this).index()+1]).toggle();
         }

However, this table also hides the visible rows if I click on one of the (now visible) hidden rows.
I’d like the click function to only work on the specific visible rows. Currently all my invisible rows have the class “even” so I figured I could limit the click based on that. However, I can’t seem to find the syntax to explain that to my function. How would I go about doing that? And, more importantly, is there a better way to approach this?

Answer 1

Use next:

$(".tbl tr:has(td)").click(
  function () {
    $(this).next().toggle();
  } 
);

And also if you have specific selector for odd or even:

$(".tbl tr.odd").click(
  function () {
    $(this).next().toggle();
  } 
);

But I think that the major help with my answer is to use next() that get you the next row, instead of the index process that you were doing.