rowIndex and cellIndex

Its that time again. Time to learn about some of the most useful properties that you may not have known about. The kinds of properties that will make you say "Oh my god, how did I not know that before?! This will make my code so much faster!"

This tutorial covers the two properties that belong to rows and cells: rowIndex and cellIndex respectively.

First question that probably comes to mind is: "What do they do?" Well, what they do, is they tell you where a row/cell is in the parent object. Specifically, they tell you what row or what cell they are in the parent (remember, JavaScript starts counting at zero however).

The next question may be: "How is this useful?" Well, there's a few things that I've found this useful for. Here's a brief list:
1. Use with insertRow and insertCell to insert a row/cell before/after the current one.
2. Use with deleteRow and deleteCell to remove the current one or remove one that is before/after the current one.
3. Use with moveRow (IE only) to move a row before/after the current one.

As you can see, it has its uses, just like every JavaScript function/object/method/property. The uses just need to be found.

Now, let's take a look at an example of how this could be used. Here's an example table.

<table border="1">
<tr id="row1"><td>Cell 1</td></tr>
<tr id="row2"><td>Cell 2</td></tr>
<tr id="row4"><td>Cell 4</td></tr>
</table>

Now, let's analyze this. We'll notice that "row3" is missing. Now, we want to insert this row to fix this. But, let's say this table is dynamically generated via PHP (just for usage's sake). We'll say we know row3 is never there, but row2 and row4 are always there, and sometimes other rows are there (row0, row1, row5, row6, etc.)

We need a quick and easy solution to insert a new row without constantly looping through all the rows. Not to mention, it'd be a bit harder since the table doesn't currently have an ID.

Now, since I've explained the basic usage for rowIndex, let's use it to insert row3 and "Cell 3". Our script will look something like this:

var r2 = document.getElementById("row2"); // Grab "row2"
var r3 = r2.parentNode.insertRow(r2.rowIndex+1); // Insert "row3"
r3.id = "row3"; // Assign the ID to be consistent
var c3 = r3.insertCell(0); // Insert the cell
c3.innerHTML = "Cell 3"; // Add the cell's innerHTML

Now, how about a break down for you guys?

var r2 = document.getElementById("row2");
First off, we need to get our row to call rowIndex off of. We use this to grab the row.

var r3 = r2.parentNode.insertRow(r2.rowIndex+1);
Now, let's use rowIndex to insert a row after our current one. We first need to grab the tbody/table element to use insertRow on, then we need to get the rowIndex+1 for where the cell would be inserted.

r3.id = "row3";
This part could just as easily be removed from the code. I only did this to be consistent.

var c3 = r3.insertCell(0);
Now, we're going to insert our cell into "row3".

c3.innerHTML = "Cell 3";
And now, we insert the innerHTML for "Cell 3".

So there's one method of doing it. There is an alternate method that could be used. That method uses "row4" instead of "row2" to insert the row, but it doesn't matter which you use. They'd produce similar results.

Anyways, hope this helps some of you guys. Enjoy.


Last Edit: Apr 26, 2007 23:54:58 GMT by Chris