Click here to Skip to main content
Click here to Skip to main content
Go to top

Append rows and controls into a table element with JavaScript

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

Introduction

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.className='';
    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");
    td.appendChild(chk);
    tr.appendChild(td);
       
    //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;
    tr.appendChild(td);
            
    var td = AppendTD();
    var sel = document.createElement('select');

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

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

    var opt1 = document.createElement("option");
    var t1 = document.createTextNode("No");
    opt1.setAttribute("value", "2");
    opt1.appendChild(t1);
    sel.appendChild(opt1);
            
    td.appendChild(sel);
    tr.appendChild(td);
       
    tblBody[0].appendChild(tr);
    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.

License

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

Share

About the Author

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

Comments and Discussions

 
QuestionHow to add a menu control PinmemberMember 369238125-Mar-10 4:43 

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 | Mobile
Web04 | 2.8.140916.1 | Last Updated 2 Jun 2008
Article Copyright 2008 by Alok Singla
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid