Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
61
rated 0 times [  68] [ 7]  / answers: 1 / hits: 22633  / 7 Years ago, mon, march 13, 2017, 12:00:00

I'm writing a java script code that will dynamically append a column of checkbox in an already existed table in html.



My html code goes like this:



<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
<title>PHP MyAdmin</title>
</head>
<body>
<table border=1>
<tr>
<th>Email_id</th>
<th>Email_content</th>
</tr>
<tr>
<td>[email protected]</td>
<td>bla bla</td>
</tr>
<tr>
<td>[email protected]</td>
<td>bla bla</td>
</tr>
</table>
</body>
</html>


And the javascript code that I'm writing to add column of checkboxes to this table created in html dynamically is as follows:



tbl = document.getElementsByTagName(body)[0];
tr = tbl.getElementsByTagName(tr);

for (i = 1; i < tr.length; i++) {
tr.appendChild(document.createElement('td'));
var checkbox = document.createElement(INPUT);
checkbox.type = checkbox;
tr.cells[2].appendChild(checkbox);
tbl.appendChild(tr);
}


I also want to specify an on click method on these checkboxes . Thanks in advance


More From » jquery

 Answers
5

tr = tbl.getElementsByTagName(tr); is an array of elements.So use tr[i] instead of tr inside for loop.





tbl = document.getElementsByTagName(body)[0];
tr = tbl.getElementsByTagName(tr);
for (i = 0; i < tr.length; i++) {

var td = document.createElement('td');
var input = document.createElement('INPUT');
input.type = 'checkbox';
td.appendChild(input);
tr[i].appendChild(td);
}

<table border=1>
<tr>
<th>Email_id</th>
<th>Email_content</th>
</tr>
<tr>
<td>[email protected]</td>
<td>bla bla</td>
</tr>
<tr>
<td>[email protected]</td>
<td>bla bla</td>
</tr>
</table>




[#58567] Friday, March 10, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
carolyn

Total Points: 618
Total Questions: 119
Total Answers: 86

Location: Saint Pierre and Miquelon
Member since Fri, Jan 28, 2022
2 Years ago
;