本文实例讲述了JS与jQuery实现隔行变色的方法。分享给大家供大家参考，具体如下：
传统的JS方法：
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> window.onload = function(){ //页面所有元素加载完毕 var item = document.getElementById("tb"); //获取id为tb的元素(table) var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素 var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素 for(var i=0;i < trs.length;i++){//循环tr元素 if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1) trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色. } } } </script> </head> <body> <table id="tb" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr><td>第一行</td><td>第一行</td></tr> <tr><td>第二行</td><td>第二行</td></tr> <tr><td>第三行</td><td>第三行</td></tr> <tr><td>第四行</td><td>第四行</td></tr> <tr><td>第五行</td><td>第五行</td></tr> <tr><td>第六行</td><td>第六行</td></tr> </tbody> </table> </body> </html>
使用JQ来隔行变色：
<script language="javascript" > $(function(){// dom元素加载完毕 $('#tb tbody tr:even').css("backgroundColor","#888"); //获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素, //改变它的背景色. }) </script>
效果图：
希望本文所述对大家jQuery程序设计有所帮助。
【JS与jQuery实现隔行变色的方法】相关文章：
★ jQuery实现限制textarea文本框输入字符数量的方法
★ JQuery使用index方法获取Jquery对象数组下标的方法