Solved

Dynamically adding table row with a checkbox using javascript

Posted on 2008-10-21
3
5,524 Views
Last Modified: 2013-11-11
I have a table that I am dynamically adding rows to using javascript, in this row I need to add a cell with a checkbox control.  I'm able to create the checkbox fine but I cannot figure out how to make it checked when it's rendered.  Here's the code I have so far:

var cell0 = row.insertCell(0);
var chkBox = document.createElement('input');
chkBox.type='checkbox';
chkBox.name='tnCheckbox' + iteration;
chkBox.id='tnCheckbox' + iteration;
chkBox.checked=true;
cell0.appendChild(chkBox);

Like I said, I'm able to create the control fine, I just need it to be checked by default.  

Thanks in advance.
0
Comment
Question by:chuck620
3 Comments
 
LVL 8

Expert Comment

by:MatthiasVance
ID: 22771468
You could try the following. I hope it helps.

Kind regards,

Matthias Vance
chkBox.setAttribute("checked", "checked");

Open in new window

0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 125 total points
ID: 22773071
try chkBox.checked='checked'; instead.

if that does not work, consider setting the checked attribute AFTER the checkbox is rendered, i.e.:
...
chkBox.id='tnCheckbox' + iteration;
//chkBox.checked=true;
cell0.appendChild(chkBox);
document.getElementById('tnCheckbox' + iteration).checked=true;
0
 

Author Closing Comment

by:chuck620
ID: 31508703
Thanks for the quick response.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now