472,119 Members | 1,939 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 472,119 developers and data experts.

Dynamically adding table row with a checkbox using javascript

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

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.


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";
  8.     //Second create a row
  9.     var row = document.createElement('tr');
  10.     row.className = 'gridrow';
  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';
  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" ;
  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. }

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.


* Written on 16-March-2011, Wednesday

About the Author

Vivek kapile
Mar 16 '11 #1
1 33544
8,658 Expert Mod 8TB
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

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Rob Meade | last post: by
1 post views Thread by Ramakrishnan Nagarajan | last post: by
2 posts views Thread by AmitKu | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.