Click here to Skip to main content
Click here to Skip to main content

Dynamically add and remove rows in an HTML table

, 30 Jul 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
Dynamically add and remove rows in an HTML table using JavaScript.

Introduction

This article shows you how to add rows to an HTML table dynamically, using DHTML and JavaScript - without requiring a round trip to the web server. I used this technique in a project to build a data entry grid, where the users wanted the flexibility to add or remove rows easily before doing a final submit/save.

The Code

The code has been tested to work with Internet Explorer 5 and above. It may work with other browsers, but I have not tested this.

The sample code has two JavaScript functions - one to add new rows and the other to delete rows. I have kept the page deliberately simple and removed all style and formatting so that the readers are not bogged down with unnecessary information. The functions are simple and self-explanatory.

//add a new row to the table
function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();
    
    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
    
    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>&nbsp;&nbsp;<input" + 
                      " type='button' value='Delete' onclick='removeRow(this);'/>";   
}
   
//deletes the specified row from the table
function removeRow(src)
{
    /* src refers to the input button that was clicked. 
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case <tr>)
    */   
    var oRow = src.parentElement.parentElement;  
    
    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("tblGrid").deleteRow(oRow.rowIndex);  

}

Usage

To use the functions, you need to create an HTML table and give it a unique ID. The sample code uses tblGrid as the ID, but you can use any other name - just make sure to modify the function to use the new name. Next, you would need to modify the addRow function to ensure that the correct number of cells are added and their innerHTML is set properly.

You can try out a working sample of the code at: http://www.interviewboard.com/DHTMLSamples/DHTMLGridSample.htm.

Conclusion

This is a simple and effective solution for creating data entry grids where the number of rows to be entered is indeterminate. It relies solely on the client side programming model, thus avoiding server round trips while adding rows. You are not restricted to using simple text boxes for the grid - by changing the innerHTML property of the cells in the addRow function, you can include drop-downs and radio buttons as well.

In a future article, I will show you how to extend the functionality of this grid to include keyboard support and posting the selected text boxes programmatically.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

eeraj
Web Developer
United States United States
Eeraj is a software developer working in the USA. He has over 10 years of experience and his interests include ASP.NET, JavaScript, C#, Data Mining and Business Intelligence. You can visit his website at http://www.interviewboard.com

Comments and Discussions

 
Questionvbscript version PinmemberJhenanne3-Sep-12 2:13 
GeneralMy vote of 5 PinmemberPrashant Trambake24-Dec-10 23:34 
GeneralMy vote of 1 Pinmemberbalucodeproject113-Jul-10 22:49 
QuestionHow to save the rows value in a database Pinmemberplm852216-May-10 3:19 
QuestionHow to insert radio button in html table in runtime PinmemberSagar.Vairagade4-Mar-09 1:11 
GeneralDynamically add rows - how to format and validate (required entry) Pinmemberuraidiot1-Nov-08 19:10 
Generaladding and removing rows dynamically and summing up of rows and columns in javascript Pinmemberkavuri chaitanya13-Oct-08 7:42 
GeneralNice Article. Pinmemberudaykatakam7-Oct-08 8:27 
Generalneed delete row operation for the existed data PinmemberPrasanna1125-Jun-08 4:32 
Questionadding the data into DB Pinmembervkd19806-Jun-08 6:45 
Generalthat a nice piece of code!! PinmemberLeelavathy5-Jun-08 5:59 
Questionhow to store all these records into database? Pinmemberprashesh30-May-08 2:05 
GeneralAdding a table dynamically and deleting multiple rows of a table Pinmembersumeet_cts22-Apr-08 20:23 
Generalthanks!! Pinmembersmitacharya24-Oct-07 12:18 
QuestionHow to add new rows to the table that is in the another table PinmemberwhyIcannotpost23-Feb-07 1:28 
AnswerRe: How to add new rows to the table that is in the another table Pinmembereeraj28-Feb-07 12:19 
QuestionHow to do the same in ASP.NET? PinmemberMember #257531712-Feb-07 10:53 
GeneralHere's an example that worx in firefox PinmemberWill667-Jan-07 22:40 
GeneralGood Article, but.. PinmemberAliasgar_SR22-Nov-06 0:15 
GeneralRe: Good Article, but.. Pinmembereeraj22-Nov-06 4:45 
GeneralRe: Good Article, but.. [modified] Pinmemberchucap26-Nov-06 6:47 
Generalyour code do not support FireFox! :-( Pinmemberazizi_ra26-Sep-06 7:18 
GeneralRe: your code do not support FireFox! :-( PinmemberMBernardo6-Dec-06 10:57 
QuestionRe: your code do not support FireFox! :-( PinmemberSadiaawan26-Mar-08 7:01 
AnswerRe: your code do not support FireFox!. These modifications works in IE/FF Pinmemberbjn219-Apr-08 22:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 30 Jul 2006
Article Copyright 2006 by eeraj
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid