Question

我创建了一个表并从数组中填充了值，因此我有5x5表，其中每个ImportError将填充一个单词。单词来自数组td，下面的所有代码都可以正常工作。

memo

我有一个问题：我想点击单元格并获取属于单元格的单词。为此，我在创建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);元素

时尝试了onclick

td

函数检查应该打印单击的单元格的innerHTML

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

但它给了我总是错误的文本 - 数组中的最后一个文本，它已被填充。我怎么能解决它？..

Answer 1

您总是得到数组中的最后一个td，因为设置为td的最后一个值是最后一个单元格。您需要将一个参数（例如event）添加到onclick的回调函数，然后您的点击元素将在event.target中引用。然后你就可以得到它的innerHTML。

Answer 2

这就是为什么它总是给你第一个元素：在for (j = 0; ...循环结束后，变量td将保存列表中最后一个元素的值。然后，当调用check时，它会访问指向最后一个元素的相同td变量。

要解决此问题，您可以向函数添加一个参数以接受特定元素并记录该参数。

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

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

Answer 3

将this作为参数设置，以定位当前点击的td。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我会在点击本身中传递innerHTML - 请参阅下面的工作示例，其中包含一些备忘录的模拟数据。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

你可以试试..

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

到

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

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

5 个答案: