insertRow and insertCell

One of the most common questions among beginners is this: "How do I insert a new row to the table?" And the answer? Simple. "Use insertRow and insertCell."

But what are these? Well, that's what I'm here to tell you. insertRow and insertCell are methods used to create new cells and rows in a table (or tbody technically). Let's start with a breakdown of how both are used and then we'll move onto an example.

First off, insertRow and insertCell are methods. Meaning, they are called off of an object. For a row, it'd be a tbody or table element. For a cell, it is a row. Let's take a look at the following syntax examples:
tableobject.insertRow(insertionpoint);
tbodyobject.insertRow(insertionpoint);
rowobject.insertCell(insertionpoint);

Both insertRow and insertCell accept one parameter. And this parameter is the point at which to "insert" the new row/cell. Since JavaScript starts at 0, putting "0" would insert a row/cell before the first row/cell in the table/row. It's also possible to use negative numbers. Negative numbers actually count backwards from the end of the table. But, since 0 is already taken, they start counting at -1. -1 would insert a row/cell at the end of the parent. -2 would make it second to last. etc.

Now, let's move on to an example.
<table border="1" id="thetable">
<tr><td>R1, C1</td><td>R1, C2</td></tr>
<tr><td>R2, C1</td><td>R2, C2</td></tr>
</table>

Now, our goal is to insert a row into this table. Let's say, we want to make it the third row, and it'll have two cells. The first cell's innerHTML will be "R3, C1" and the second's will be "R3, C2". Now let's make the code to modify it. There's two ways to do this, so take a look at the two different ways. (They're in different code boxes.)

var newRow = document.getElementById("thetable").insertRow(2); // Insert the third row
var newCell1 = newRow.insertCell(0); // Insert the first cell
newCell1.innerHTML = "R3, C1"; // First cell's innerHTML
var newCell2 = newRow.insertCell(1); // Insert the second cell
newCell2.innerHTML = "R3, C2"; // Second cell's innerHTML

Here's method number two. This uses the rows and cells arrays and negative inserts. If you don't know what they are, they're basically arrays containing every TR that belongs to the table and every TD that belongs to a row.

var tab = document.getElementById("thetable"); // Reference the table to save space
tab.insertRow(-1); // Insert the third row as the last row. No variable assigned because we don't reference it as so later
var newCell1 = tab.rows[2].insertCell(-1); // Insert the first cell as the last cell
newCell1.innerHTML = "R3, C1"; // First cell's innerHTML
var newCell2 = tab.rows[2].insertCell(-1); // Insert the second cell as the last cell
newCell2.innerHTML = "R3, C2"; // Second cell's innerHTML

Either way works perfectly fine, its just your preference. Anyways, here's what the new HTML for the table would look similar to:
<table border="1" id="thetable">
<tr><td>R1, C1</td><td>R1, C2</td></tr>
<tr><td>R2, C1</td><td>R2, C2</td></tr>
<tr><td>R3, C1</td><td>R3, C2</td></tr>
</table>

Now, for a quick breakdown of how the first code works. I won't be giving a break down for the second, as its an alternate method. If you want a challenge, break it down yourself and tell yourself how it works.

var newRow = document.getElementById("thetable").insertRow(2);
This line creates the new row as the third row. What we do is we have assigned an ID to the table, so we grab the table via the ID. Then, we insert the new row via the insertRow method. We also assigned a variable reference point to this new row so we can call other methods upon it later.

var newCell1 = newRow.insertCell(0);
Remember how we assigned the variable to that row? Well, we're calling it here. This line is using the row stored in "newRow" to insert a new first cell for it. We also assign that cell to the variable "newCell1" for later uses.

newCell1.innerHTML = "R3, C1";
Here's that variable. All we do here is add the innerHTML for newCell1. How fun.

var newCell2 = newRow.insertCell(1);
newCell2.innerHTML = "R3, C2";
This is almost the same thing as the last two sections. Except, this is for the second cell instead.

Anyways, hopefully this tutorial helps some novices again. This is one of the most useful table functions I've found, and I use it quite a bit whenever I use DOM for codes or make profile editable codes. So, enjoy.


Last Edit: Jul 22, 2006 5:30:24 GMT by Chris