JavaScript。使用鼠标悬停事件更改数组中 td 元素的背景颜色

Question

我正在使用 Javascript 创建一个简单的绘画程序，在开始此任务之前几乎一无所知。我真的很接近，我能感觉到，但我错过了拼图中的一些重要部分。生成一个表格，当鼠标悬停时，td 元素应该改变颜色。稍后我将添加按钮来更改画笔(鼠标)的颜色，但这部分很简单。

function drawTable(){
var body = document.body;
var tbl = document.createElement('table');

tbl.setAttribute("id", "canvas");
tbl.style.width = '800px';
tbl.style.border = '1px solid black';
tbl.style.margin = 'auto';


for (var i = 1; i <= 10; i++){
    var tr = tbl.insertRow();
    for (var k = 1; k <= 10; k++){
        var td = tr.insertCell();
        //td.appendChild(document.createTextNode(''));
        td.style.border = '1px solid black';
        td.style.height = '70px';
        td.style.width = '120px';

    }

}
body.appendChild(tbl);
}
drawTable();
var color = "black";
var tableData = document.getElementsByTagName('td');


for (i = 0; i < tableData.length; i++){
    tableData[i].onmouseover = changeColour("red");
}

function changeColour(x){
    this.style.backgroundColor = x;

}

Answer 1

var tableData = document.getElementsByTagName('td');
for (i = 0; i < tableData.length; i++){
    tableData[i].onmouseover = changeColour("red");
}

function changeColour(x){
    return function(){
    this.style.backgroundColor = x;
    }    
}