Whereas we've used Javascript to dynamically modify table contents in a previous tutorial, we've never written a tutorial specifically explaining how it's done. That's where this tutorial comes in. I'm going to demonstrate, through some simple examples, how to dynamically add and remove table rows and cells using Javascript.
If you're wondering why someone would want to do this, the answer is simple: AJAX. If you make a request to the server for some tabular data, you're going to need some way of putting it on the screen. Fortunately, the creators of Javascript made the process straight forward and pretty intuitive. Before we dive into some code, take a look at the example we'll be building today.
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
First up, let's take a look at the HTML required to build the example.
<button type="button" onclick="deleteRow()">Delete Row</button>
<table id="myExampleTable" width="100%">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
</table>
Pretty simple, right? I've got two buttons: one for adding a row, and one for deleting a row. After the buttons there is the table we'll be modifying. You'll have to give it an id so Javascript can get a reference to it. I called mine, "myExampleTable".
When the "Add Row" button is clicked, it calls the function addRow(). Let's take a look at that.
// Adds a new row to the table.
//
function addRow(){
//get the table
var table = document.getElementById('myExampleTable');
//get the number of rows currently in the table
var numRows = table.rows.length;
//insert a new row at the bottom
var newRow = table.insertRow(numRows);
//create new cells
var newCell1 = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
var newCell3 = newRow.insertCell(2);
//set the cell text
newCell1.innerHTML = 'Row ' + (numRows + 1) + ' Cell 1';
newCell2.innerHTML = 'Row ' + (numRows + 1) + ' Cell 2';
newCell3.innerHTML = 'Row ' + (numRows + 1) + ' Cell 3';
}
The first thing you'll need to do is get the actual table element by calling document.getElementById. If you're going to be updating the table a lot, you might want to save the element off to a variable somewhere so you don't have to find it over and over again.
In order to add a row to the table, you have to tell it the index. I want mine at the end, so I need to know how many rows I've got. I do that by reading the table.rows.length value. I then call insertRow and pass it the number of rows in the table, which will place the new row at the bottom. insertRow returns a reference to the new row element, which we'll be using next to add cells.
Just like adding rows, you also have to provide an index at which you'd like a new cell. My rows each contain three cells, so I call insertCell for each index and save the resulting cell elements to variables. I wanted to put some identifying information in each cell, so I simply set the innerHTML of each new cell with their row and cell indices.
It might be tempting to just set the innerHTML of the table with some rows and cells, however we've discovered this can cause a world of pain - especially with Internet Explorer. That being said, you should stick with the DOM methods.
That does it for adding rows and cells to the table. The last thing to look at is deleting the rows when the delete button is clicked.
// Deletes the last row in the table.
//
function deleteRow(){
//get the table
var table = document.getElementById('myExampleTable');
//delete the last row
if(table.rows.length > 1)
table.deleteRow(table.rows.length - 1);
}
Again, I get the table element by calling document.getElementById. All that left to do is call deleteRow with the index of the row I'd like to delete. In this case, it's the last row, so I simply pass it table.rows.length - 1. I always want at least one row in the table, which is why the delete code is surrounded by the conditional.
That's all there is to it. As you can see, modifying tables with Javascript is very simple once you find the right functions.
03/05/2009 - 15:04
Wow. And no JS framework.
03/31/2009 - 06:58
i have onclick="javascript:showBig('3','ddd')" for in image
i need to dynamically modify 3 two 2;
how can i do that
06/27/2009 - 02:43
If I want to dynamically change the background color of a certain row in a table, do I have to delete the row and then re-add it, or is there an easier way to do it? tia.
06/29/2009 - 08:43
All you have to do is get a reference to the row element and set the background style. You can do this by keep the reference when the row is initially created or giving it an id and calling document.getElementById('id').
row.style.background = 'red';
02/23/2010 - 07:34
i want to edit the rows which i have created dynamically using javascript....please tell me !!