通过javascript动态添加html表中的列
[英]Dynamically adding a column in html table through javascript
问题描述
I'm writing a java script code that will dynamically append a column of checkbox in an already existed table in html. 
我正在编写一个java脚本代码，它将动态地在html中已存在的表中附加一列复选框。
My html code goes like this: 我的HTML代码是这样的：
<!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>akshay1234530@yahoo.com</td>
<td>bla bla</td>
</tr>
<tr>
<td>ohm3966@gmail.com</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: 我正在编写的javascript代码添加到动态html中创建的此表的复选框列如下：
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 . 我还想在这些复选框上指定一个on click方法。 Thanks in advance 提前致谢
4 个解决方案
解决方案1
2 2017-03-13 16:17:56
Here's an answer using jQuery, since you tagged it as that, I am assuming jQuery will do. 这是使用jQuery的答案，因为你将其标记为，我假设jQuery会这样做。
$("#addColumn").click(function () { $("tr:first").append("<td>MyTitle</td>"); $("tr:not(:first)").append("<td>Sample Element</td>"); //$("tr:not(:first)").append("<td><input type='checkbox' />Sample Element</td>"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!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>akshay1234530@yahoo.com</td> <td>bla bla</td> </tr> <tr> <td>ohm3966@gmail.com</td> <td>bla bla</td> </tr> </table> </body> </html> <button id="addColumn">Add Column</button>
解决方案2
1 2017-03-13 16:10:25
for (i = 1; i < tr.length; i++) {
// create the cell
var td = document.createElement('td');
// create the checkbox
var input = document.createElement('INPUT');
input.type = 'checkbox';
// append checkbox to cell
td.appendChild(input);
// append cell to row
tr.appendChild(td);
}
解决方案3
1 已采纳 2017-03-13 16:13:25
tr = tbl.getElementsByTagName("tr"); is an array of elements.So use tr[i] instead of tr inside for loop. 是一个元素数组。所以使用tr[i]而不是tr for循环。
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>akshay1234530@yahoo.com</td> <td>bla bla</td> </tr> <tr> <td>ohm3966@gmail.com</td> <td>bla bla</td> </tr> </table>
解决方案4
0 2017-03-13 16:12:12
Here is a jQuery solution (since you tagged it) 这是一个jQuery解决方案（因为你标记了它）
tbl = $("#theTable"); $("#theTable tr").each(function(){ $(this).append("<td><input type='checkbox'/></td>") }); /* 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); }*/
table, td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" id="theTable"> <tr> <th>Email_id</th> <th>Email_content</th> </tr> <tr> <td>akshay1234530@yahoo.com</td> <td>bla bla</td> </tr> <tr> <td>ohm3966@gmail.com</td> <td>bla bla</td> </tr> </table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.