473,574 Members | 2,579 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamically adding table row with a checkbox using javascript

17 New Member
Title:Dynamical ly adding table row with a checkbox using JavaScript
Author:Vivek Kapile
Email:snipped
Language:JavaSc ript
Platform:JavaSc ript 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 34108
Dormilich
8,658 Recognized Expert Moderator Expert
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
14101
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 id="Table1" runat="server"></asp:Table> there is other code too but I believe this to be the relevant part...
1
5984
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 info for that option. For example if someone chooses 'other', a user needs to type what other is. Because more than one option needs more info, I do...
1
5890
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 server side and thing was working fine. But when the user clicks the last row in the grid and make the modify in that row to be checked the focus...
2
18262
by: AmitKu | last post by:
<script> function CheckChange() { var mycheck = document.getElementById('test'); mycheck.check = true; } </script> <body> <form id="form1" runat="server">
1
1599
by: gaya3 | last post by:
Hi, How to insert row in table using javascript when some event occurs in html? -Hamsa
1
2465
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 the same operation on all the "chkBox" elements. It gets them by calling document.getElementsByName("chkBox") and then modifies their status. Now I...
5
3201
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. The row that gets added will need to contain 2 columns, 1 which contains an IFRAME, and the other will contain a Javascript Menu which will be used...
5
8366
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 dropdown, and pass the value selected to the VALUE attribute of a table on the same page. The following is code which doesn't work!!! <script...
7
1914
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
3883
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 help me. This is code to insert(works in IE) var myLink = document.createElement('a'); var href = document.createAttribute('href');
0
7730
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
1
7820
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8100
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6456
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5624
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5301
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3742
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3753
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1344
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.