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

Question

I'm creating a simple paint program with Javascript with really next to no knowledge prior to starting this task. I'm really close, I can feel it but I'm missing some vital piece of the puzzle. A table is generated and on mouseover, the td elements are supposed to change colour. I'll be adding buttons to change the colour of the paintbrush(mouse) later but that part will be easy enough.

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