当前位置：首页 > 资讯 > 技术文档

JS与jQuery实现隔行变色的方法

时间：2021-09-21 12:11 编辑：来源：阅读：
扫一扫，手机访问

摘要：JS与jQuery实现隔行变色的方法

本文实例讲述了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>

效果图： [img]http://files.jb51.net/file_images/article/201609/201699114104874.png?201689114123[/img] 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》、《[url=http://www.1sucai.cn/Special/497.htm]jQuery拖拽特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/539.htm]jQuery表格(table)操作技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/93.htm]jquery中Ajax用法总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》及《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》希望本文所述对大家jQuery程序设计有所帮助。

全部评论(0)

上一篇：JavaScript简介
下一篇：理解javascript闭包

资讯排行榜
更多>>