473,320 Members | 2,133 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,320 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
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
1 34016
Dormilich
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

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

Similar topics

4
by: Rob Meade | last post by:
Hi all, I'm desperately trying to get this to work and I just cant do it - new to ASP.net - probably the reason! I'm using visual studio for this - I have this in the html page : <asp:Table...
1
by: Karim | last post by:
I have a form built into an html table. One of the form elements is an asp.net dropdownlist. For some options in the listbox, I want to insert a new table row under the listbox to grab some more...
1
by: Ramakrishnan Nagarajan | last post by:
Hi, I have two checkboxes in each row of a grid. One for Modify and another one for View. If I click Modify the View should get automatically checked and should be disabled. Earlier I did this in...
2
by: AmitKu | last post by:
<script> function CheckChange() { var mycheck = document.getElementById('test'); mycheck.check = true; } </script> <body> <form id="form1" runat="server">
1
by: gaya3 | last post by:
Hi, How to insert row in table using javascript when some event occurs in html? -Hamsa
1
by: spiderman2 | last post by:
When the page is first accessed, certain HTML elements are dynamically created. The checkboxes all have the name "chkBox". There is a special "checkAll" checkbox which when checked or unchecked, does...
5
by: Liquidtouch | last post by:
I'm not much of a HTML or Javascript programmer but have a little experience just hacking away at it. I am creating a HTML application and would like to be able to add or remove rows of a table....
5
by: phub11 | last post by:
Hi all, I've not had much luck getting any responses from my previous posts, but managed to figure stuff out. Now I'm really stuck! Any help at all would be great.... I'd like to use a SELECT...
7
by: ms026057 | last post by:
I Have a File a.html file Content <html> <body> <table> <tr><td id="table1">this content from b.html</td></tr> </table> </body> <html>
1
by: visweswaran2830 | last post by:
Hi, I want to insert href into tabel cell using javascript. Note should support all browser. I know to insert, but it support only in IE, I checked in firefox, it does not support so please...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.