1

This is my current code. What I am trying to accomplish is as follows.

If json[i].enabled is true, I need to check the corresponding checkbox. If not, leave it empty. 

function createTable(json) { var element = ""; var i; for (i = 0; i < json.length; i++) { element = element + '<tr><td><input type= "checkbox"/></td><td>' + json[i].a_id + '</td><td>' + json[i].name + '</td><td>'+ json[i].enabled + '</td></tr>'; if(json[i].enabled== "TRUE"){ $('checkbox').prop('checked', true); } } //Had forgotten to add this before. element = element + '</tbody>'; $('#dataTable > tbody').remove(); $("#dataTable").append(element); }

I tried it by including the following if condition but it fails. 

 if(json[i].enabled== "TRUE"){ $('checkbox').prop('checked', true); }

So, how do I go about doing this? How do I access that particular checkbox in the loop?

Thanks!

Improve this question
2
  • 1
    What is $('checkbox')? It should be $('input[type="checkbox"]') or $('.checkbox') Commented Aug 22, 2014 at 14:19
  • And even then, it will check every checkbox, not just the one you want -- although if the one you want is the one in the 'element' string, it doesn't exist in the DOM to be checked, anyway. Commented Aug 22, 2014 at 14:20

4 Answers 4

Reset to default
1

Using string concatenation and a ternary operator:

'<tr><td><input type="checkbox"' + ( json[i].enabled== "TRUE" ? ' checked' : '' ) + '/></td><td>'
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1 
$('input[type="checkbox"]').prop('checked', true);

complete example:

var $table=jQuery('<table></table>'); for (i = 0; i < json.length; i++) { var $tr=jQuery( '<tr><td><input type= "checkbox"/></td><td>' + json[i].a_id + '</td><td>' + json[i].name + '</td><td>'+ json[i].enabled + '</td></tr>'); if(json[i].enabled== "TRUE"){ $tr.find('input["checkbox"]').prop('checked', true); } $table.append($tr); } $jQuery('body').append($table);
Improve this answer

5 Comments

It is working but I am getting duplicate of every row.
That is weird, should not be possible. Try putting some "console.log()" around the code, this is a implementation bug as this "is" a valid way of handling these situation and I'm using it allover my code myself. (calling the $table.append($tr)twice?)
Yeah it maybe. I am using ajax calls and it is getting called twice. That is why I am including the DOM element outside for loop to remove existing elements and re-add the concatenated string.
I am not sure why this happens.
stackoverflow.com/questions/25451795/jquery-in-phonegap Here is a link to my entire code, if you can help me fix the code.
1

The checbox element has not been created yet in the DOM. So you have to put the html first. Then use

input[type="checkbox"]

to match an actual checkbox element. And at last, you might want to get the last checkbox only (in the last row of your table) with this selector :

mytable tbody tr:last input[type="checkbox"]

So you have the following code : 

function createTable(json) { var i; for (i = 0; i < json.length; i++) { // construct the html element = '<tr><td><input type= "checkbox"/></td><td>' + json[i].a_id + '</td><td>' + json[i].name + '</td><td>'+ json[i].enabled + '</td></tr>'; // put the html in the page $('#mytable tbody').append(element); if(json[i].enabled== "TRUE"){ // get the last inserted line in the table and check the checkbox $('#mytable tbody tr:last input[type="checkbox"]').prop('checked', true); } } }
Improve this answer

Comments

0

Try this:

$('input[type="checkbox"]:eq(i)').prop('checked', true);
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.