我有一个HTML页面,其中有一个表,我在其中动态添加了第三行复选框。当我访问OnClick On Checkbox中的行中的单元格时,它显示了我的错误。
我的JavaScript代码像这样:
tbl = document.getElementsByTagName("body")[0];
tr = tbl.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
var td = document.createElement('td');
var input = document.createElement('INPUT');
input.type = 'checkbox';
input.onclick = function () {
for(var j=0;j<tr[i].cells.length;j++) //error occur on this line
//Uncaught TypeError: Cannot read property 'cells' of undefined
at HTMLInputElement.input.onclick
{
console.log(tr[i].cells[j].innerHTML);
}
};
td.appendChild(input);
tr[i].appendChild(td);
}
我对应的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>
请帮忙。预先感谢。
function func(elem,id){
elem.onclick = function () {
console.log(id);
for(var j=0;j< tr[id].cells.length;j++) //error occur on this line
//Uncaught TypeError: Cannot read property 'cells' of undefined
//at HTMLInputElement.input.onclick
{
console.log(tr[id].cells[j].innerHTML);
}
};
}
tbl = document.getElementsByTagName("body")[0];
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
var td = document.createElement('td');
var input = document.createElement('input');
input.type = 'checkbox';
func(input,i);
td.appendChild(input);
tr[i].appendChild(td);
}
<!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关闭有关。由于JS知道它已在ONCLICK函数中使用,因此保留了i的值。因此,当您尝试单击复选框时,ID是3,显然是未定义的。看看这个问题。它将帮助您了解JavaScript关闭如何工作?