Find Table Row Index using jQuery

Question

I'm an intermediate user in jQuery. I know to find the rowIndex of a table using jQUery, but my scenario is a different one. My table(GridView) consists of 20 columns and each column with different controls like textbox, dropdownlist, image, label. All are server side controls in each row. I bind the gridview with the records from the database. Now when I click on any control or onchange of any textbox, I need to get the rowIndex of that changed column's row. Here is the code I've user:

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent().attr('sectionRowIndex'));
});

But I'm unable to get the rowIndex. If I use any html control inside the gridview, I'm able to get the rowIndex. Is there any way to find out the rowIndex when a server control inside the gridview is clicked?

Answer 1

This is for a checkbox in the table cell, on change:

 var row = $(this).parent().parent();
 var rowIndex = $(row[0].rowIndex);
 console.log(rowIndex);

Answer 2

Try this:

var rowIndex = $(this)
    .closest('tr') // Get the closest tr parent element
    .prevAll() // Find all sibling elements in front of it
    .length; // Get their count

Answer 3

sectionRowIndex is a property of the <tr> element, not an attribute.

The correct way to modify your sample code is to access the jQuery item with a zero indexer like this:

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent()[0].sectionRowIndex);
});

This will return the correct row index for you. Also, if you are going to use jQuery's .closest() function to traverse up the DOM and also .parent(), why not compine those two and just traverse up to the closest <tr> element?

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('tr')[0].sectionRowIndex);
});

This will also handle weird cases where the parent->child relationship isn't exactly what you expected. For example if you chained a $(this).parent().parent() and then decided to wrap your inner cell with another div or span, you might screw up the relationship. The .closest() is the easy way out to make sure it will always work.

Of course my code samples are re-using your provided sample above. You may wish to test with a simpler selector first to prove it works, then refine your selectors.

Answer 4

Should be able to just use:

var rowIndex = $(this).parents("tr:first")[0].rowIndex;