Question

我有一个脚本可以创建一个包含JSON数据的表。在每一行中，我有两个文本和一个按钮。按钮的onlick方法应该转到其他HTML页面，该页面将填充前一个表中同一行的两个文本。首先，我正在尝试打印以在不同按钮的onclick上控制不同的文本。这是应该做的部分：

for ( var i in json) {
var row = table.insertRow(0);
var cel1 = row.insertCell(0);
var cel2 = row.insertCell(1);
var cel3 = row.insertCell(2);
cel1.innerHTML = json[i].nome;
cel2.innerHTML = json[i].idade;
var b = document.createElement("BUTTON");
var idd = "id" + i;
b.setAttribute("id", idd);
var t = document.createTextNode("Loja");
b.appendChild(t);
b.onclick = function(event) {
    console.log(idd);
}
cel3.appendChild(b);

虽然这会正确创建一个包含所有正确ID的表格，但所有按钮的按下都会打印最后一个idd值，而不是与id按钮匹配的值。任何人都知道如何解决这个或更好的方法来实现它？

Answer 1

我看到的主要问题是，您正在记录变量idd。此变量在for循环后和单击按钮时具有静态值。

相反，你应该尝试：

b.onclick = function(event) {
    console.log(this.id);
}

此外，可以设置id而不通过其属性设置属性：

b.id = idd;

以下是一个可以轻松查看它的示例：

for(var i=0, j=9; i<j; i++){
    var tB = document.body.appendChild(document.createElement('button'));
    tB.id = tB.innerHTML = i;
    tB.onclick = function(){
        console.log(i, this.id) //logs 9 (i is now statically 9) and the buttons id
    }
}

如何为每个动态创建的按钮引用不同的onclick方法？

1 个答案: