简单实现表格隔行变色+鼠标经过变色

代码
<!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>
<script language="javascript">
function show(){
var tab=document.getElementById("tab");
var tr=tab.getElementsByTagName("tr");
for(var i=0;i<=tr.length;i++){
if(i%2==0){
tr[i].style.backgroundColor
="#ccc";
tr[i].onmouseover
=function(){this.style.background="red"};
tr[i].onmouseout
=function(){this.style.background="#ccc"}
}
else{
tr[i].style.backgroundColor
="#fff";
tr[i].onmouseover
=function(){this.style.background="red"};
tr[i].onmouseout
=function(){this.style.background="#fff"}
}
}
}
window.onload
=show;
</script>
</head>
<body>
<table id="tab" width="50%">
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
</table>

</body>
</htmll>

 

运行演示效果:http://www.websjy.com/bbs/viewthread.php?tid=5771

posted @ 2010-08-25 17:37  设计源  阅读(278)  评论(0编辑  收藏  举报