Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

JavaScript to Add and Remove Rows and Cells from a Table

By Stephen Bucaro

To use the example above, remember, row and cell indexes start with 0, not 1. if there is only one row, that row is both the top row and the bottom row.

If you have a client-side application where you have a table that you want to enable the user to add and remove rows and cells, you can do that easily, with some reservations, using JavaScript. Shown below are the JavaScript methods that can be used.

table.insertRow(row)
table.deleteRow(row)
row.insertCell(cell)
row.deleteCell(cell)

First place the html code for your table in the document. Shown below is the code for a table that initially contains no rows or cells.

<table id="myTable" border="1">
</table>

Then you would access the table using the getElementById method as shown below.

var table = document.getElementById("myTable");

Then you could insert a new row at the top of the table using the .insertRow method as shown below.

var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = "New Top Cell";

Note that after creating a new row, I immediately used the row.insertCell method to create a cell in that row. With no cell, a table row is not visible. Next I used the .innerHTML method to place some text in the new cell.

Then you could insert a new row at the bottom of the table using the .insertRow method as shown below.

var row = table.insertRow(-1);
var cell = row.insertCell(0);
cell.innerHTML = "New Bottom Cell";

You insert a new row at the bottom of the table by setting the row index to -1.

The code to insert a new cell in an existing bottom row is shown below.

var len = table.rows.length;
var cell = table.rows[len - 1].insertCell(-1);
cell.innerHTML = "New Bottom Cell";

First use the table.rows.length property to determine how many rows are in the table. Remember row indexes start with 0, so you need to subtract 1 to get the index of the bottom row. Then use the .insertCell method, passing it an index of -1 to add a cell to the end of the row.

Deleting a row is similar to adding a row, simply use the .deleteRow method, passing index 0 to delete a row form the top of the table, or passing index -1 to delete a row from the bottom of the table.

table.deleteRow(0);
table.deleteRow(-1);

Deleting a cell involves getting the row's index first and then using the .deleteCell method, passing index 0 to delete the first cell in the row, or passing index -1 to delete the last cell in the row.

table.rows[0].deleteCell(0);
table.rows[0].deleteCell(-1);

using this method, adding or removing rows other than at the top or bottom, or adding or removing cells other than at the top or bottom is unreliable because after you've used the code for a few table modifications, it's difficult to determine the index number of the remaining rows and cells. It seems that JavaScript unpredictably re-indexes them.

Another way to add new rows and cells to a table, or remove rows and cells from a table is to use the .appendChild and .removeChild. I'll look at that in a future article.

• Get zip file containing example code here.

More Java Script Code:
• Code for a Less annoying Popup Window
• A JavaScript Function That Returns a Function
• How to Use HTML5 canvas arc and arcTo Functions
• Easy Picture Zoom Code
• Debugging JavaScript : Coercions
• Create a Mouse Click Sound Effect
• Java Script Code to Calculate Speed / Distance of Falling Object
• Java Script to Dynamically Add, Remove, and Change Items in a Select List
• Creating Basic Java Script Functions
• Calendars for Your Website