Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / Javascript

Dynamically add and remove rows in an HTML table

Rate me:
Please Sign up or sign in to vote.
3.65/5 (13 votes)
30 Jul 2006CPOL2 min read 356.8K   5K   26   30
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.

JavaScript
//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)


Written By
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

 
QuestionHow to insert data in databaseof dynamically created rows ? Pin
Member 137062572-Mar-18 20:56
Member 137062572-Mar-18 20:56 
QuestionCan u tell me how to edit/update row Pin
Mahesh Reddy4-Nov-15 23:35
Mahesh Reddy4-Nov-15 23:35 
GeneralThanks for this post. Pin
Nirmal S Dhar19-Feb-15 2:27
Nirmal S Dhar19-Feb-15 2:27 
Questionvbscript version Pin
Jhenanne3-Sep-12 1:13
Jhenanne3-Sep-12 1:13 
GeneralMy vote of 5 Pin
Prashant Trambake24-Dec-10 22:34
Prashant Trambake24-Dec-10 22:34 
GeneralMy vote of 1 Pin
balucodeproject113-Jul-10 21:49
balucodeproject113-Jul-10 21:49 
QuestionHow to save the rows value in a database Pin
plm852216-May-10 2:19
plm852216-May-10 2:19 
QuestionHow to insert radio button in html table in runtime Pin
Sagar.Vairagade4-Mar-09 0:11
Sagar.Vairagade4-Mar-09 0:11 
GeneralDynamically add rows - how to format and validate (required entry) Pin
uraidiot1-Nov-08 18:10
uraidiot1-Nov-08 18:10 
Generaladding and removing rows dynamically and summing up of rows and columns in javascript Pin
kavuri chaitanya13-Oct-08 6:42
kavuri chaitanya13-Oct-08 6:42 
GeneralNice Article. Pin
udaykatakam7-Oct-08 7:27
udaykatakam7-Oct-08 7:27 
Generalneed delete row operation for the existed data Pin
Prasanna1125-Jun-08 3:32
Prasanna1125-Jun-08 3:32 
Questionadding the data into DB Pin
vkd19806-Jun-08 5:45
vkd19806-Jun-08 5:45 
Generalthat a nice piece of code!! Pin
Leelavathy5-Jun-08 4:59
Leelavathy5-Jun-08 4:59 
Hey tried your code and found very useful in my work.
I have stuck at a point where i have to catch the non-deleted rows values during post back and how do i keep track of the rows and their idex when deleted.
Please help. Smile | :)
Questionhow to store all these records into database? Pin
prashesh30-May-08 1:05
prashesh30-May-08 1:05 
GeneralAdding a table dynamically and deleting multiple rows of a table Pin
sumeet_cts22-Apr-08 19:23
sumeet_cts22-Apr-08 19:23 
Generalthanks!! Pin
smitacharya24-Oct-07 11:18
smitacharya24-Oct-07 11:18 
QuestionHow to add new rows to the table that is in the another table Pin
whyIcannotpost23-Feb-07 0:28
whyIcannotpost23-Feb-07 0:28 
AnswerRe: How to add new rows to the table that is in the another table Pin
eeraj28-Feb-07 11:19
eeraj28-Feb-07 11:19 
QuestionHow to do the same in ASP.NET? Pin
Member 257531712-Feb-07 9:53
Member 257531712-Feb-07 9:53 
GeneralHere's an example that worx in firefox Pin
Will667-Jan-07 21:40
Will667-Jan-07 21:40 
GeneralGood Article, but.. Pin
Aliasgar_SR21-Nov-06 23:15
Aliasgar_SR21-Nov-06 23:15 
GeneralRe: Good Article, but.. Pin
eeraj22-Nov-06 3:45
eeraj22-Nov-06 3:45 
GeneralRe: Good Article, but.. [modified] Pin
HoangKC26-Nov-06 5:47
HoangKC26-Nov-06 5:47 
Generalyour code do not support FireFox! :-( Pin
azizi_ra26-Sep-06 6:18
azizi_ra26-Sep-06 6:18 

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

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