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

没有 jQuery：

function mouseover() {
    this.setAttribute("class", "new");
    return true;
}

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

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

函数被移到循环外，ids 是前缀以避免冲突

使用 jQuery：

function mouseover() {
    this.setAttribute("class", "new");
    return true;
}

function nNewElements(tag, idPrefix, n) {
    var result = [];
    for (var i = 1; i <= n; i++) {
        result.
        push($("<" + tag + ">").
        attr("id", idPrefix + i)[0]);
    }
    return $(result);
}

$(document).ready(function () {
    $("#grid").
    html('').
    append('<table>');

    nNewElements("tr", "row", 10).
    appendTo("table").
    each(function () {
        nNewElements("td", "data", 15).
        mouseover(mouseover).
        text("..").
        appendTo($(this));
    });
});

Answer 2

你很接近。

this在onmouseover函数中使用关键字，而不是函数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/

Answer 3

如果您确实想使用 jQuery：

$('table td').mouseover(function() {
    $(this).addClass('new');
});

这会将类添加new到任何事件中的任何<td>元素。<table>mouseover