Click here to Skip to main content
12,820,031 members (30,157 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 24 May 2008

Append rows and controls into a table element with JavaScript

, 2 Jun 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Dynamically append rows and controls into a table element with JavaScript.


This article explains how to add rows and controls in an HTML table element dynamically. It is very useful to be able to add or append rows and form controls in a web page using JavaScript. For example, when we need a button to add a number of new rows having form controls in a web page. I found it very helpful to have the user have the option to add/edit multiple records by adding new HTML controls dynamically on button click. Rows and controls will be added without even refreshing the page and information is updated in the database using AJAX. Using this code is very easy. It is just a combination of HTML and JavaScript. In the onclick event of the href of the link or button, call the JavaScript AppendRow() function and it will add controls dynamically in the page.

Javascript to Add Rows and Controls

The required code is attached with this article. Call the AppedRow() function on the click of a button. In the sample, I have added textbox, checkbox, and dropdown controls using JavaScript in the newly added row.

The AppendTD() function is used to add a cell in a newly created row.

function AppendTD()
    var td = document.createElement("td");
    td.setAttribute("height", "24px");
    return td;

Get a reference of the table element which is already created in the web page, and append rows into the referred table element.

function AppendRow()
    var tblObj = document.getElementById('mainTable');
    var tblBody = tblObj.childNodes;
    var ttlRows = tblBody[0].childNodes.length;
    var index = ttlRows;
    var cellHTML = "";
    var tr = document.createElement('tr');
    //adding first column
    var td = AppendTD();
    //adding checkbox to first column
    var chk = document.createElement('input');
    chk.setAttribute("id", "chk"+index);
    chk.setAttribute("name", "chk"+index);
    chk.setAttribute("type", "checkbox");
    //adding second column
    var td = AppendTD();
    //adding text box
    cellHTML = '<input type="text" class="txtboxcommon" id="txt'+
               index+'1" name="txt'+index+'1" />';
    td.innerHTML = cellHTML;
    var td = AppendTD();
    var sel = document.createElement('select');

    sel.setAttribute("id", "dd"+index+"1");
    sel.setAttribute("name", "dd"+index+"1");

    var opt0 = document.createElement("option");
    var t0 = document.createTextNode("Yes");
    opt0.setAttribute("value", "1");

    var opt1 = document.createElement("option");
    var t1 = document.createTextNode("No");
    opt1.setAttribute("value", "2");
    return false;

This is my first article on CodeProject. I like it as an adventure, because before writing any article I first test it and it also increases my knowledge.


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


About the Author

Alok Singla
Software Developer (Senior)
India India
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionHow to add a menu control Pin
Member 369238125-Mar-10 5:43
memberMember 369238125-Mar-10 5:43 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170308.1 | Last Updated 2 Jun 2008
Article Copyright 2008 by Alok Singla
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid