我正在编写一个java脚本代码，它将在html中已经存在的表中动态附加一列复选框。
我的 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>[email protected] /cdn-cgi/l/email-protection</td>
<td>bla bla</td>
</tr>
<tr>
<td>[email protected] /cdn-cgi/l/email-protection</td>
<td>bla bla</td>
</tr>
</table>
</body>
</html>
我正在编写的用于将复选框列添加到动态创建的 html 表格中的 JavaScript 代码如下：
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);
}
我还想在这些复选框上指定单击方法。提前致谢
这是使用 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>[email protected] /cdn-cgi/l/email-protection</td>
<td>bla bla</td>
</tr>
<tr>
<td>[email protected] /cdn-cgi/l/email-protection</td>
<td>bla bla</td>
</tr>
</table>
</body>
</html>
<button id="addColumn">Add Column</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
