javascript - 事件侦听器 - 用于 HTML 行的 MouseOver、Mouseout、OnClick

Question

我正在使用 Javascript 动态构建一个表。为在 XML 文件中找到的每个产品创建行。我正在尝试为 MouseOver MouseOut 和 Onclick 创建 EventListeners，以便：

OnClick - 显示带有单击行的 innerHTML 的警报。

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

那应该做所需的。