通过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/

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

功能被移动到外循环，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)); 
    }); 
});