Append rows and controls into a table element with JavaScript

Download source code - 2.27 KB

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.