Изменить атрибут класса td onmouseover

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

функция перемещается за пределы контура, идентификаторы имеют префикс, чтобы избежать столкновения

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