鼠标悬浮列表变色

最新推荐文章于 2025-01-08 07:00:00 发布

原创最新推荐文章于 2025-01-08 07:00:00 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #ViewUI

//分别是奇数行默认颜色,偶数行颜色,鼠标放上时奇偶行颜色
var aBgColor = ["#FFFFFF","#f2faff","#CCCCCC","#CCCCCC"];
//从前面iHead行开始变色，直到倒数iEnd行结束
function addTableListener(o,iHead,iEnd)
{
o.style.cursor = "normal";
iHead = iHead > o.rows.length?0:iHead;
iEnd = iEnd > o.rows.length?0:iEnd;
for (var i=iHead;i<o.rows.length-iEnd ;i++ )
{
o.rows[i].onmouseover = function(){setTrBgColor(this,true)}
o.rows[i].onmouseout = function(){setTrBgColor(this,false)}
}
}
function setTrBgColor(oTr,b)
{
oTr.rowIndex % 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] : oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0];
}
window.onload = function(){addTableListener(document.getElementById("tbColor"),0,0);};
//以上是JavaScript代码
//在你需要变色的table中定义id="tbColor"