Orange is my favorite color

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. :)

3 Comments

  1. Danny Howard said:

    on March 28, 2008 at 10:01 am

    optoin?

  2. brian said:

    on March 28, 2008 at 10:53 am

    It’s a custom HTML tag I invented. :) Thanks for the typo catch.

  3. Linda said:

    on March 29, 2008 at 8:45 am

    Hi! I came across your blog posts about applying for Italian citizenship…I’m doing the same thing, and I have a couple questions…Can I email you, maybe? That would rock, but if not, that’s OK. My sis is also going to piggyback off mine–like your brother…It’s a hell of a lot of paperwork…

    Thanks, Linda [email protected]

{ RSS feed for comments on this post}