javascript error on accessiong cells of row in onclick method

Question

I have an HTML page, which has a table in it, I have dynamically added a third row of checkbox in it. When I access the cells of rows inside onclick method of checkbox it shows me error.

my javascript code goes like this:

 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);
 }

My corresponding 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>

Please help. Thanks in advance.

You haven't shown how the code is called, it may be that the table doesn't exist when it runs. Also, `getElementsByTagName("body")` gets the document body, not the table so `tbl.getElementsByTagName("tr")` will get all rows in the page. — RobG, Mar 13 '17 at 20:35

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

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>

This is something related to javascript closures. The value of i is retained since js knows it is being used in the onclick function. Hence when you try to click on the checkbox, the id is 3 which obviously is undefined. Take a look at this question. It will help you understand How do JavaScript closures work?

edited May 23 '17 at 12:00

Community

1
1

answered Mar 13 '17 at 20:26

CaptainHere

698
6
14

An answer should explain why the issue occurs and how your code fixes it. Simply posting code is not that helpful. – RobG Mar 13 '17 at 20:30
@RobG Sorry, was taking some time to edit.. :) – CaptainHere Mar 13 '17 at 20:32
tr[id].cells[j].innerHTML returns an array of inner HTML contents . How to access it's first content?? like in the example above.....clicking on first row prints "akshay1234530@yahoo.com" , "bla bla" and "" on console .How to access the first column cell i.e. "akshay1234530@yahoo.com" ???? – akshay Mar 13 '17 at 20:39
I did not understand that. you mean the emailid? – CaptainHere Mar 13 '17 at 20:41
i want access first element in innerHTML.. – akshay Mar 13 '17 at 20:43
You can store it in a variable. declare a variable outside that function and store the tr[id].cells[j].innerHTML in it. – CaptainHere Mar 13 '17 at 20:46

javascript error on accessiong cells of row in onclick method

1 Answers1