jQuery技术

JQuery 学习:隔行变色

字号+ 作者:H5之家 来源:H5之家 2016-12-30 08:00 我要评论( )

JQuery 学习:隔行变色

专注于互联网主流的各种技术

简明现代魔法 -> JQuery -> JQuery 学习:隔行变色

JQuery 学习:隔行变色

2010-07-17

实现步骤如下:

效果演示

第一行第一行

第二行第二行

第三行第三行

第四行第四行

第五行第五行

第六行第六行

JavaScript Code <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 = "#fffacd"; // 改变 符合条件的tr元素 的背景色. } } } </script> HTML Code <table> <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>

随机文章推荐

网站分类

注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客

你也许还会对以下文章感兴趣

喜欢本文,就分享它吧

给我留言



 

copyright 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery学习之操作类数组的工具方法

    JQuery学习之操作类数组的工具方法

    2016-12-30 08:01

  • jquery 学习 (二)

    jquery 学习 (二)

    2016-12-29 18:03

  • 使用jQuery实现Web页面换肤功能的要点解析

    使用jQuery实现Web页面换肤功能的要点解析

    2016-12-28 14:00

  • 用jquery实现js的跨域请求

    用jquery实现js的跨域请求

    2016-12-28 13:02

网友点评