我对 onclick 事件有疑问。 我有一个 3*3 的表格,当我单击 td 元素时,我只想更改此元素。 代码:
var CaseID = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
var table = document.createElement("table");
for (a = 0; a < 3; a++) {
var tr = document.createElement("tr");
for (b = 0; b < 3; b++) {
var td = document.createElement("td");
td.onclick = function() {
// here I want to change backgroundColor into red, but only for the one I pressed
};
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
for (c = 0; c < CaseID.length; c++) {
document.getElementsByTagName("td")[c].id = CaseID[c];
}
table {
border-collapse:collapse;
}
tr, td {
height:50px;
width:50px;
border:1px #000 solid;
}
最佳答案
您可以只设置其样式属性的backgroundColor,如下所示。在该 onclick 函数中,this
引用该元素。
var CaseID = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
var table = document.createElement("table");
for (a = 0; a < 3; a++) {
var tr = document.createElement("tr");
for (b = 0; b < 3; b++) {
var td = document.createElement("td");
td.onclick = function() {
this.style.backgroundColor = 'red';
};
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
for (c = 0; c < CaseID.length; c++) {
document.getElementsByTagName("td")[c].id = CaseID[c];
}
table {
border-collapse:collapse;
}
tr, td {
height:50px;
width:50px;
border:1px #000 solid;
}
关于javascript - onclick td元素,只有这一个会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44785021/