2 回答

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個贊
這是因?yàn)槟鷮?vars 用于循環(huán)變量,點(diǎn)擊時您總是有 i=4 和 j=4 。只需用 let 替換它們:
function clickable() {
var table = document.getElementById("mytable");
if (table != null) {
for (let i = 0; i < table.rows.length; i++) {
for (let j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () { colorChange(i, j); };
}
}
}

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個贊
您不需要任何i和j業(yè)務(wù)。只需直接選擇單元格元素并循環(huán)遍歷它們以添加事件偵聽器,使用querySelectorAll,按照下面的演示。
注意你提到你想“改變每個單元格的背景顏色取決于它的值是> 5還是低于” ......但是你如何定義“值”?目前還不清楚。在 colorChange 函數(shù)中,您嘗試使用單元格的“innerHTML”測試值,但您的單元格無論如何都沒有任何內(nèi)容,因此它永遠(yuǎn)不會工作。
因此,對于演示的目的,我以為你打算填充細(xì)胞的價值觀i和k,然后解釋這些作為一個單一的數(shù)字,當(dāng)你做colorChange測試。
也<table border="1">需要刪除。您不能在另一個表中直接擁有一個表。無論如何,這不是必需的。
function createTable() {
document.body.innerHTML += '<table border="1" id="mytable"></table>';
for (var i = 0; i < 4; i++) {
document.getElementById("mytable").innerHTML += '<tr id="row' + i + '"></tr></table>';
for (var k = 0; k < 4; k++) {
document.getElementById("row" + i).innerHTML += '<td id=' + i + k + '>' + i + k + '</td>';
}
}
}
function clickable() {
var cells = document.querySelectorAll("#mytable td");
cells.forEach(function(cell) {
cell.addEventListener("click", colorChange);
});
}
function colorChange() {
console.log(this.innerHTML);
if (this.innerHTML > 5) {
this.style.backgroundColor = "green";
}
}
createTable();
clickable();
有關(guān)文檔,請參閱https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll。
添加回答
舉報