通过javascript在html表中动态添加列 [英] Dynamically adding a column in html table through javascript
本文介绍了通过javascript在html表中动态添加列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在编写一个Java脚本代码，该代码将在html中已存在的表中动态添加一列复选框。
I'm writing a java script code that will dynamically append a column of checkbox in an already existed table in html.
我的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>akshay1234530@yahoo.com</td>
<td>bla bla</td>
</tr>
<tr>
<td>ohm3966@gmail.com</td>
<td>bla bla</td>
</tr>
</table>
</body>
</html>
我正在编写的javascript代码，将复选框的列添加到此表中是在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
推荐答案
tr = tbl.getElementsByTagName（ tr）; 是元素数组。因此在内使用循环。 tr [i] 代替 tr for
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>akshay1234530@yahoo.com</td>
<td>bla bla</td>
</tr>
<tr>
<td>ohm3966@gmail.com</td>
<td>bla bla</td>
</tr>
</table>
这篇关于通过javascript在html表中动态添加列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
