Dynamically adding table row with a checkbox using javascript

[vivek kapile]

Title:Dynamically adding table row with a checkbox using JavaScript
Author:Vivek Kapile
Email:snipped
Language:JavaScript
Platform:JavaScript in ASP.net
Technology:Used in ASP.net
Level:Beginner


Introduction
This code will help for the beginners, who want to learn, how to create a checkbox dynamically within a table through JavaScript.
I have covered a very small portion of the java script, hope this will help for the beginners.

before writing a java script I will give a small introduction how to create a checkbox through dynamically.
1.Create a element for the "table"
2.Create a element for the row("tr")
3.Create a element for the "TD"
4.Create a element for type as a ('input')
5.Set the properties to the checkbox.

Description:

Below is a sample code.

//JavaScript function to create a checkbox within a table through JavaScript
function CreateCheckBox()
{
   //First create a element for the table
   var tbl = document.createElement('table');
    tbl.border = "1";
 
    //Second create a row
    var row = document.createElement('tr');
    row.className = 'gridrow';
 
    //Third create td element
    td = document.createElement('td');
    td.className = 'gridcell';
    td.style.fontWeight = 'normal';
    td.rowSpan = 1;
    td.style.width = '80px';
 
    //fourth create checkbox in that td element
    var chkbox = document.createElement('input');
    chkbox.type = "checkbox";
    chkbox.id = "chk" ;
    chkbox.name = "chk" ;
 
    //Fifth add checkbox to td element
    td.appendChild(chkbox);
    //Add a td into a row
    row.appendChild(td);
    //Finally added to the form to print
    form1.appendChild(tbl);
}

Summary

There are many topics to learn with JavaScript. I have covered a small portion hope this will helps all the beginners to start up. Please give your feedback and suggestion.

History

* Written on 16-March-2011, Wednesday




About the Author

Vivek kapile
Developer
India,Bangalore

[Dormilich]

I think older versions of IE are having problems setting the input type through the type property.

and one problem, the id attribute must bear a unique value!