[英]Event Listeners - MouseOver, Mouseout, OnClick for HTML Rows
我正在使用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);
有任何想法吗?
对于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;}
那应该做所需的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.