在论坛上搜索过的有一个是这样的，
<html >
<head>
<title> 鼠标放置后变色 </title>
<script type="text/javascript">
<!--
//分别是奇数行默认颜色,偶数行颜色,鼠标放上时奇偶行颜色
var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"];
//从前面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);}
//-->
</script>
</head>
<body>
<table border="1" width="100%" id="tbColor">
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
</table>
</body>
</html>
不过经过后奇偶的都会给加上颜色，大伙有没有鼠标经过时会整个行变色，有选择时的一行就变其它颜色呢
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>变色</title>
<style type="text/css">
tr.hover{background:#aaa;}
tr.checked{background:blue;color:#fff;}
</style>
</head>
<body>
<table class="item">
<tr>
<td>数据 数据 数据 数据</td>
</tr>
<tr>
<td>数据 数据 数据 数据</td>
</tr>
<tr>
<td>数据 数据 数据 数据</td>
</tr>
<tr>
<td>数据 数据 数据 数据</td>
</tr>
<tr>
<td>数据 数据 数据 数据</td>
</tr>
</table>
<script type="text/javascript" src="?ver=1.4.2"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table.item tr").hover(
function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
}
).click(
function(){
$(this).toggleClass("checked");
}
);
});
</script>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
