By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,952 Members | 1,686 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

Dynamically adding table row with a checkbox using javascript

P: 17
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.

Expand|Select|Wrap|Line Numbers
  1. //JavaScript function to create a checkbox within a table through JavaScript
  2. function CreateCheckBox()
  3. {
  4.    //First create a element for the table
  5.    var tbl = document.createElement('table');
  6.     tbl.border = "1";
  7.  
  8.     //Second create a row
  9.     var row = document.createElement('tr');
  10.     row.className = 'gridrow';
  11.  
  12.     //Third create td element
  13.     td = document.createElement('td');
  14.     td.className = 'gridcell';
  15.     td.style.fontWeight = 'normal';
  16.     td.rowSpan = 1;
  17.     td.style.width = '80px';
  18.  
  19.     //fourth create checkbox in that td element
  20.     var chkbox = document.createElement('input');
  21.     chkbox.type = "checkbox";
  22.     chkbox.id = "chk" ;
  23.     chkbox.name = "chk" ;
  24.  
  25.     //Fifth add checkbox to td element
  26.     td.appendChild(chkbox);
  27.     //Add a td into a row
  28.     row.appendChild(td);
  29.     //Finally added to the form to print
  30.     form1.appendChild(tbl);
  31. }
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
Mar 16 '11 #1
Share this Article
Share on Google+
1 Comment


Dormilich
Expert Mod 5K+
P: 8,639
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!
Mar 16 '11 #2