Welcome to Bucaro TecHelp!

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

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

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.

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:
• Let Your Web site Visitors Set Font Size
• Java Script Code for a Random Circle Generator
• Allowing Multiple Selections from Drop-down Select List
• Easy Code to Sort a Table by Column
• Introduction to HTML5 Canvas
• Use JavaScript parseInt() and parseFloat() to Convert Strings to Numbers
• Display a Value in Currency Format
• Calculators for Your Website : Decimal to Hexidecimal Converter
• JavaScript to Add and Remove Rows and Cells from a Table
• Including Special Characters in a JavaScript String

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



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