js实现表格与div隔行变色的代码
1、table表格隔行换色
遍历table的tr判断其下标的奇偶来进行操作
1)、示例:
<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
<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.jbxue.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>
您可能感兴趣的文章:
javascript实现隔行变色函数代码一例
js 隔行变色的最简单代码
JS控制表格隔行变色的实现代码
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
Js表格隔行换色(隔行变色)代码一例
js 隔行变色与鼠标悬停自动变色的实现代码
js 隔行变色 鼠标经过变色的代码
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js实现表格隔行变色,鼠标经过时高亮显示的代码