Слушатели событий - MouseOver, Mouseout, OnClick для строк HTML

Question

Я динамически создаю таблицу, используя Javascript. Строки создаются для каждого продукта, найденного в файле XML. Я пытаюсь создать EventListeners для MouseOver MouseOut и Onclick, чтобы:

OnClick - предупреждение отображается с внутреннимHTML строки, нажатой.

OnMouseOver - Изменение фона строки нажмите на # 19405f

OnMouseOut - Изменение фона обратно #FFFFFF

Вот код:

var root=document.getElementById('information'); 
var tab=document.createElement('table'); 
tab.className="productTable"; 
var tbo=document.createElement('tbody'); 
for (var i=0; i<mobiles.length; i++){ 
    var row=document.createElement('tr'); 
    var cell=document.createElement('td'); 
    cell.appendChild(document.createTextNode(mobiles[i].name)); 
    row.appendChild(cell); 
    var cell=document.createElement('td'); 
    cell.appendChild(document.createTextNode(mobiles[i].price)); 
    row.appendChild(cell); 
    tbo.appendChild(row); 
} 
tab.style.border = "1px solid #000"; 
tab.appendChild(tbo); 
root.appendChild(tab); 

Любые идеи?

Answer 1

Для события OnClick, я предлагаю вам добавить немного к концу сценария вы предоставили

var rows = tab.rows; 
for (var i = 0; i < rows.length; i++) { 
    rows[i].onclick = (function() { 
     return function() { 
      var content = this.cells[0].innerHTML + this.cells[0].innerHTML; 
      alert(content); 
     }  
    })(i); 
} 

В MouseOver и MouseOut могут быть обработаны с простым CSS. Добавьте приведенный ниже CSS в таблицу стилей

.productTable tr {background:#FFF;} 
.productTable tr:hover {background:#19405f;} 

Это должно сделать необходимое.