javascript - 通过 onmouseover 更改 td 的类属性

Question

我正在构建一个表。我需要一个 <td>表更改其属性 class至 someattribute直到鼠标悬停。

应该怎样？

代码:

var table = document.createElement('table');
for (var i = 1; i <=10; i++)
{
    var tr = document.createElement('tr');
    tr.setAttribute('id',i)
    table.appendChild(tr);
    for (var j = 1; j <=15; j++)
    {
        var td = document.createElement('td');
        td.setAttribute('id',j);
        // Here:
        td.OnMouseOver = new function() 
        {
            td.setAttribute("class","new");
        };
        tr.appendChild(td);
    };
};

document.getElementById("grid").innerHTML = '';
document.getElementById("grid").appendChild(table);

Answer 1

你很接近。

在您的onmouseover 函数中使用关键字this，而不是您的函数无法访问的td。此外，您不需要使用关键字 new 来定义函数。

    td.onmouseover = function () {
        this.setAttribute("class", "new");
    };

代码:

var table = document.createElement('table');
for (var i = 1; i <= 10; i++) {
    var tr = document.createElement('tr');
    tr.setAttribute('id', i)
    table.appendChild(tr);
    for (var j = 1; j <= 15; j++) {
        var td = document.createElement('td');
        td.setAttribute('id', j);
        td.innerHTML = '&nbsp;';
        td.onmouseover = function () {
            this.setAttribute("class", "new");
        };
        tr.appendChild(td);
    };
};

document.getElementById("grid").innerHTML = '';
document.getElementById("grid").appendChild(table);

http://jsfiddle.net/samliew/VnkHB/10/