通过 onmouseover 更改 td 的类属性答案

【问题标题】：Change class attribute of td by onmouseover通过 onmouseover 更改 td 的类属性
【发布时间】：2013-04-13 15:41:58
【问题描述】：

我正在构建一张桌子。我需要一个<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);

【问题讨论】：

td.onmouseover = function() {
这是 jQuery 早餐吃的那种东西。
你不应该在循环中创建函数，它只会让你感到困惑。像这里td.setAttribute("class","new"); 将仅适用于最后创建的td

标签： javascript setattribute

【解决方案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/

【讨论】：

【解决方案2】：

如果你确实想使用 jQuery：

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

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

【讨论】：

【解决方案3】：

没有 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));
    });
});

【讨论】：