隔行变色+鼠标经过变色JS效果

隔行变色+鼠标经过变色JS效果
js代码如下:

<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>
 
html代码如下:
<table id="tab">
<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>

点击查看原图

文章来源:http://www.webbise.com/post/tablechangecolor.html

演示地址:http://www.webbise.com/upload/js/tabchangecolor.html

已有 5 条评论
  1. borse louis vuitton

    Hey There. I found your blog using msn. This is a really well written article. I抣l be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I抣l certainly comeback.

    borse louis vuitton 回复
  2. Air Jordans

    永远坚信自信是迈向成功的第一步!

    Air Jordans 回复
  3. 极乐鸟

    emlog的在文章中发代码显示高亮的功能没有吗?

    极乐鸟 回复
  4. 远走高飞

    这效果很有动感~

    远走高飞 回复
  5. 万戈

    这个可以参考一下jquery的选择器,可以用更简单的方法实现哟{smile:22}

    万戈 回复
发表新评论