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

你很亲密。

在您的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 2

如果你确实想使用jQuery：

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

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

Answer 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);

函数被移动到循环外部，id被加前缀以避免碰撞

使用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));
    });
});

通过onmouseover更改td的类属性

3 个答案: