How to know index of a <tr> inside a <table> with jQuery?

Question

I'm now implementing something like this post (specifically, the effect takes place when the row is clicked)

How do I know what the index of the row is inside the table?

Answer 1

If you defined the click handler directly on the tr elements, you can use the index method like this:

$('#tableId tr').click(function () {
  var rowIndex = $('#tableId tr').index(this); //index relative to the #tableId rows
});

If the click event is bound not directly on the tr element (if you are using an anchor, a button, etc...), you should find the closest tr to get the right index:

$(selector).click(function () {
  var rowIndex = $('#tableId tr').index($(this).closest('tr'));

  return false;
});

Try an example here.