Finding the row and cell index of a clicked table cell with jQuery

I needed to find where I was at in a table so I could report back the row and cell position for another function. There aren’t any easy-to-find answers from the Google so I set about doing my standard Javascript DOM exploration:

for (var ii in this)
console.info(" ii = " + ii);

I explore this way because I don’t know any better. After much debugging with the .bind() on my TableSorter table, I cobbled together references to the row and cell so I could update a single value in the table cache when a form element is changed as a performance boost for large tables. This assumes a SELECT box but it works for any element inside of a TD:

<table>
...
<tbody>
...
<tr>
<td>...</td>
<td>
<select name="foo">
<option value="100">Blow, Joe</option>
<option value="200">Mack, Jane</option>
<option value="300">Zanker, John</option>
</select>
</td>
</tr>
...
</tbody>
</table>

And the corresponding Javascript event handler:

$("table#tblNumbers select").change(
function()
{
// get row, cell, value
var cell = $(this).parent("td");
var row = $(cell).parent("tr");
var cellValue = [[row[0].sectionRowIndex, cell[0].cellIndex, $(this).find("option:selected").text()]];

// update table cache
$(this).parents("table").trigger("updateCell", cellValue);
}
);

The trick is that jQuery’s .parent() returns a single-item array that you must access through the [0] identifier. If you drop into the [0] item, you have full access to the DOM node including the properties for rowIndex and cellIndex.

In addition to sectionRowIndex, you can also use rowIndex. It depends on whether or not you want the position absolutely in the table or relative to the TBODY you’re inside. I wanted to exclude the THEAD from the row count so I used sectionRowIndex.

Hope that helps someone… or more likely, helps me when I forget how to do this again next week.