如何在JavaScript中的动态填充表中获取td的innerHTML

Question

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?..

Answer 1

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.

Answer 2

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

Answer 3

Pass this as the parameter to function which will target the currently clicked td .

 var memo = [[2,4,6]] var myTableDiv = document.getElementById("results") var table = document.createElement('TABLE') var tableBody = document.createElement('TBODY') table.border = '1' table.appendChild(tableBody); //TABLE COLUMNS var tr = document.createElement('TR'); tableBody.appendChild(tr); //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); } td.appendChild(document.createTextNode(this.memo[i][j])); tr.appendChild(td) } tableBody.appendChild(tr); } myTableDiv.appendChild(table); function check(thatTD) { var a = thatTD.innerHTML; console.log(a); } 

 <div id="results"></div> 

Answer 4

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> 

Answer 5

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..
}