Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

JavaScript to Add and Remove Rows and Cells from a Table


Row: Cell:

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.


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">

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.


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.


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:
• Calculators for Your Website : Fahrenheit to Celsius Converter
• Calendars for Your Website
• A Brief Introduction to HTML for JavaScript Programmers
• Calculators For Your Web Site
• How to Shuffle the Deck With Java Script
• Round a Float to 4 Digits to the Right of the Decimal Point
• Slide Show with Different Size Images
• Use JavaScript parseInt() and parseFloat() to Convert Strings to Numbers
• Using the Java Script Date Object
• Easy JavaScript Web Storage Code

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268