24小时免费服务热线：15250286283
发布日期：2016-03-01 浏览次数：192
table 鼠标悬停效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table{width:100%;background-color:#fff;}
table td{background-color:#ccc;padding:5px;}
table tr.hover td{background-color:Green;}
</style>
</head>
<body>
<div id="container">
</div>
<script type="text/javascript">
var doc = document,
container = doc.getElementById("container"),
html = [],
table, i, len;
var addListener = function () {
if (window.addEventListener) {
return function (el, sType, fn, capture) {
el.addEventListener(sType, fn, (capture));
};
} else if (window.attachEvent) {
return function (el, sType, fn, capture) {
el.attachEvent("on" + sType, fn);
};
} else {
return function () { };
}
} ();
html[html.length] = '<table id="tablelist" cellpadding="0" cellspacing="1" border="0">';
for (i = 0, len = 1000; i < len; i += 1) {
html.push("<tr><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td></tr>");
}
html[html.length] = "</table>";
container.innerHTML = html.join('');
table = doc.getElementById("tablelist");
addListener(table, "mouseover", function (e) {
e = e || window.event;
var elem = e.target || e.srcElement,
name = elem.nodeName;
if(name === "TD"){
elem = elem.parentNode;
name = elem.nodeName;
}
setTimeout(function(){
if(name === "TR"&&elem.className.indexOf('h')<0){
elem.className = "hover";
}
},0);
});
addListener(table, "mouseout", function (e) {
e = e || window.event;
var elem = e.target || e.srcElement,
name = elem.nodeName;
if(name === "TD"){
elem = elem.parentNode;
name = elem.nodeName;
}
setTimeout(function(){
if(name === "TR"&&elem.className.indexOf('h')>=0){
elem.className = "";
}
},0);
});
/*for (i = 0, len = table.rows.length; i < len; i += 1) {
(function(item){
addListener(item, "mouseover", function () {
item.className = "hover";
});
addListener(item, "mouseout", function () {
item.className = "";
});
})(table.rows[i]);
}*/
</script>
</body>
</html>
管理员
该内容暂无评论