Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
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

Virtuoso

Virtuoso Avatar

****
Senior Member

271


May 2006
:o Nice. :)

Jordan

Jordan Avatar

***
Dedicated Member

173


July 2006
Yes, thankyou. :)

Simie

Simie Avatar

******
ProScripter

1,052


May 2006
Oh my god, how did I not know that before?!

:P
Nice tutorial :)


Chris

Chris Avatar

******
Head Coder

19,519


June 2005
simie said:
Oh my god, how did I not know that before?!

:P
Nice tutorial :)


:P You're the second person to say that to this tutorial.

Simie

Simie Avatar

******
ProScripter

1,052


May 2006
Wheres the first? O.o

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
pixeldepth.net/index.php?action=tutorials&category=1&id=1153571053

Comments at the very bottom. :P SZ isn't the only place I post my tutorials... (its like one of two. :P)

newBookmarkLockedFalling