CODEWITHSUNDEEP
javascripthtml
Anna F
Anna F

Reputation: 1683

How to get innerHTML of td in dynamically populated table in JavaScript

I created a table and populated values from an array, so I have 5x5 table, where each td will be filled with a word. The word come from array memo and all the code below works fine.

var myTableDiv = document.getElementById("results")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')

table.border = '1'
table.appendChild(tableBody);

//TABLE ROWS
for (i = 0; i < this.memo.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < this.memo[i].length; j++) {
        var td = document.createElement('TD');
        td.onclick = function () {
            check();
        }
        td.appendChild(document.createTextNode(this.memo[i][j]));
        tr.appendChild(td)
    }
    tableBody.appendChild(tr);
}  
myTableDiv.appendChild(table);

I have one question : I would like to click on the cell and get the word, which belongs to the cell. For this purpose I tried onclick as I created td element

   td.onclick = function () {
            check();
        }

The function check should print the innerHTML of the cell, which was clicked

function check() {
    var a = td.innerHTML;
    console.log(a);
}

But it gives me always wrong text - the last one in the array, which was populated. How could I solve it?..

Upvotes: 0

Views: 1541

Answers (4)

Snow Wayne
Snow Wayne

Reputation: 1

you can try.. 

td.onclick = function () {
    check();
}

to

td.onclick = function (evt) {
    var html = evt.target.innerHTML;
    console.log(html);
    check(html);  //to do something..
}

Upvotes: 0

Stacey Reiman
Stacey Reiman

Reputation: 695

I would pass the innerHTML in the click itself - please see working example below, with some mock data for memo.

var myTableDiv = document.getElementById("results")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')
var memo = [
['joe', 'tom', 'pete'],
['sara','lily', 'julia'],
['cody','timmy', 'john']
]

table.border = '1'
table.appendChild(tableBody);

//TABLE ROWS
for (i = 0; i < this.memo.length; i++) {
    var tr = document.createElement('TR');
    for (j = 0; j < this.memo[i].length; j++) {
        var td = document.createElement('TD');
        td.onclick = function () {
            check(this.innerHTML);
        }
        td.appendChild(document.createTextNode(this.memo[i][j]));
        tr.appendChild(td)
    }
    tableBody.appendChild(tr);
}  
myTableDiv.appendChild(table);

function check(a) {
    console.log(a);
}
<div id="results">
</div>

Upvotes: 0

Amit Beckenstein
Amit Beckenstein

Reputation: 1332

You always get the last td in the array because the last value that was set to td was of the last cell. You need to add the a parameter, say event, to onclick's callback function, and then your clicked element will be referenced in event.target. Then you would be able to get it's innerHTML.

Upvotes: 1

kingdaro
kingdaro

Reputation: 12018

Here's why it's always giving you the first element: after the for (j = 0; ... loop is finished, the variable td will hold the value of the last element in the list. Then, when check is called, it accesses that same td variable pointing to the last element.

To solve this, you can add an argument to the function to accept a specific element and log that.

td.onclick = function () {
  check(td);
};

// later...
function check(element) {
  var html = element.innerHTML;
  console.log(html);
}

Upvotes: 0

Related Questions