how to print innerHTML of all tds when click on any td in javascript only

Question

I have a table, I want to print all inner html of table cells when I click on any cell, If I do this through button it's working fine but when I do this with click on cell it's throwing an error Uncaught TypeError: Cannot read property 'innerHTML' of undefined.

function funcName(){
   var allTds = document.getElementsByTagName("td");
  for(var j=0; j<allTds.length;j++){  
        allTds[j].onclick = function(){
            var chekTds = allTds[j].innerHTML;
                console.log(chekTds);                
    }   
}

Please clear that on click on a cell, you want to print only that cell html or overall cells html? — M Razwan, Nov 04 '15 at 06:37
var chekTds = allTds.innerHTML; showing in console "undefined" — mohsin shah, Nov 04 '15 at 06:42

Anand Singh · Accepted Answer · 2015-11-04T07:03:43.020

1

Change to this...

    function funcName() {
    var allTds = document.getElementsByTagName("td");
    for (var j = 0; j < allTds.length; j++) {
        allTds[j].onclick = function() {
            var allTdsNew = document.getElementsByTagName("td");
            for (var k = 0; k < allTdsNew.length; k++) {
                console.log(allTdsNew[k].innerHTML);
                     }

                   }

               }
           }

edited Nov 04 '15 at 07:03

answered Nov 04 '15 at 06:56

Anand Singh

2,343
1
22
34

this real works exactly I want thank you so much Anand – mohsin shah Nov 04 '15 at 07:06
most welcome mohsin :) – Anand Singh Nov 04 '15 at 07:11
This is very inefficient, *allTds* is a live collection, so there is no need to get it every time the function is called. Why not just put a single listener on the document and if a click comes from a TD, write the innerHTML of all TDs? – RobG Nov 04 '15 at 07:37
if you do that .., internal process will be same as this... because it has to bind with every td. – Anand Singh Nov 04 '15 at 07:47

score 0 · Answer 2 · answered Nov 04 '15 at 06:53

0

You have onclick in you function. check this code.

<script>
function wokring(){
   var allTds = document.getElementsByTagName("td");
  for(var j=0; j<allTds.length;j++){  
        var chekTds = allTds[j].innerHTML;
            alert(chekTds);                
    }
} 
</script>
<table>
    <tr>
        <td onclick="wokring()">1</td>
        <td  onclick="wokring()">2</td>
    </tr>   
</table>

remove this line....

allTds[j].onclick = function(){

answered Nov 04 '15 at 06:53

M Razwan

257
3
12

so if I have hundred of tds then I have to place function in all you mean? – mohsin shah Nov 04 '15 at 06:56
tds are generating dynamically – mohsin shah Nov 04 '15 at 06:56
If auto generated than it will not be difficult to add onclick event on each. – M Razwan Nov 04 '15 at 07:04

how to print innerHTML of all tds when click on any td in javascript only

2 Answers2