OnClick方法中行的登录单元格上的JavaScript错误



我有一个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关闭如何工作?

最新更新