js实现表格与div隔行变色的代码

发布时间:2019-09-22编辑:脚本学堂
js代码分别实现表格与div的隔行变色,并提供了一个鼠标经过时变色的js代码实例,有需要的朋友,不妨参考学习下。

1、table表格隔行换色
遍历table的tr判断其下标的奇偶来进行操作
1)、示例:
 

复制代码 代码示例:
<table id="table_list">
<tr>                                                                                                                   
...<td>...
</tr>
....
</table>

2)、js代码
 

<script type="text/javascript">
<!--
var cobj=document.getElementById("table_list").rows;
    for (i=0;i< cobj.length ;i++) {
      (i%2==0)?(cobj[i].style.background = "#E0FFFF"):(cobj[i].style.background = "#FFFFFF");
    }
//-->
</script>

注意:该JS代码必须写在<table>标签的下面,不然解析不了

2、div控制隔行变色
1)、div
 

复制代码 代码示例:
<ul id="div1">
<li>afdsfasdf</li>
<li>asdfasdfasdf</li>
<li>sdfgsdfg</li>
<li>sdfgsdfg</li>
</ul>

2)、js代码
 

<script Language="Javascript">
var cobj=document.getElementById("div1").getElementsByTagName("li");
   for (i=0;i< cobj.length ;i++) {
      (i%2==0)?(cobj[i].style.background = "#eee"):(cobj[i].style.background = "#fff");
    }
</script>

以下代码实现鼠标经过时变色(高亮显示)的效果。
 

<script type="text/javascript">
/**
 * 鼠标经过时高亮显示
 * www.jb200.com
*/
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
    for (i=1;i<Ptr.length+1;i++) {
    Ptr[i-1].className = (i%2>0)?"t1":"t2";
    }
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
    Ptr[i].onmouseover=function(){
    this.tmpClass=this.className;
    this.className = "t3";
   
    };
    Ptr[i].onmouseout=function(){
    this.className=this.tmpClass;
    };
}
//-->
</script>