js可以实现js li隔行变色色，如何实现隔5行变色，原理是什么？

来源：蜘蛛抓取(WebSpider) 时间：2015-10-26 08:02 标签： 汽车变色是什么原理
当前位置： >
Jquery实现表格隔行变色的效果
发布时间： 点击次数：正在加载... 来源：
表格隔行变色效果是一种非常常见的效果，以前用javascript实现起来感觉还挺复杂的，如今通过jquery只需要一句代码就OK了，真的很强大，下面就来看看具体如何使用jquery实现表格隔行变色的效果吧。
隔行变色效果图如下：
Jquery实现表格隔行变色的效果的具体示例代码如下：
&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&&&&type=&text/javascript&&src=&/jquery-1.7.2.min.js&&&&language=&javascript&&$(document).ready(function(){&&&&&$('table&tr:nth-child(odd)').addClass('edit');&});&&&type=&text/css&&.edit{background-color:#a5e5}&&&&border=&1&&&&&&&&&&&&&&&1&&&&&&&&&&&&&&&&&&&&&&&&&&&&&2&&&&&&&&&php教程&&&&&&&&&&&&&&&&&&&&&&3&&&&&&&&&&&&&&&&&&&&&&&&&&&&&4&&&&&&&&&php教程&&&&&&&&&&&&&&&&&&&&5&&&&&&&&&代码家园&&&&&&&&&&
转载请注明： >>
本文原地址：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
JavaScript/JQuery页面导航：
→ 正文内容 js求余数
js取模（求余数）隔行变色
今天需要用js实现做隔行变色功能，原来用的是asp程序都是用mod取模，原来js中用的是%,具体如下需要的朋友可以参考下
代码如下:&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&js取模隔行变色&/title&&script type="text/javascript"&window.onload=function(){&var oUl=document.getElementById('ul1');&var aLi=oUl.getElementsByTagName('li');&for(var i=0; i& aLi . i++)&{&&if(i%2==0)& //取模 求余数&&{&&&aLi[i].style.background='red';&&}&}}&/script&&/script&&/head&&body&&ul id="ul1"&&&li&webtall&/li&&&& &li&webtall&/li&&&& &li&webtall&/li&&&& &li&webtall&/li&&&& &li&webtall&/li&&/ul&&/body&&/html&
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910&用js实现的各行变色的效果
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
&html xmlns=&&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&script language=&javascript& type=&text/javascript&&
&function& getTr(){
&&//获取所有的行数
& var trs=document.getElementsByTagName(&tr&);&
&&&& for(var i=0;i&trs.i++){
&var classnames=document.getElementById(&a&).classN
&//获取所有tr的classname的值&
&& if( i % 2 == 0){
& trs[i].style.background=&1px solid yellow&;
&&&&&&&&&&&&&& }else{
& trs[i].style.background=&1px solid red&;&&&&&
&&&&& && }&
&table width=&200& border=&0&&
& &tr class=&namea& id=&a&& &
&&& &td&啊啊啊啊啊啊啊啊啊啊啊&/td&
& &tr class=&nameb& id=&a&& &
&&& &td&白拜拜拜拜拜拜拜拜拜拜&/td&
& &tr class=&namea& id=&a&& &
&&& &td&哈哈哈哈哈哈哈哈哈哈哈&/td&
& &tr class=&nameb& id=&a&& &
&&& &td&反反复复反反复复反反&/td&
& &tr class=&namea& id=&a& &
&&& &td&就斤斤计较斤斤计较斤斤&/td&
&input type=&button& value=&测试隔行变色& onclick=&getTr()& /&
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：50668次
积分：1226
积分：1226
排名：第19463名
原创：73篇
转载：15篇
(1)(2)(1)(1)(1)(16)(11)(19)(24)(1)(11)js实现隔行变色-------Day40 - CSDN博客
就这样开始了自己的第二个项目，业绩员考评系统，一进入项目组，首先要开始的，又是这痛苦的界面设计，完全不能改变现有的模板，只能在现有基础上进行发挥，我可怜的审美在这狭小的空间里突然就这样无能为力了，好吧，总有些地方还是需要加些效果的，像这种隔行变色，不就很实用嘛。
table在这个div+css肆虐的时代有些没落了，但是碰到多列数据显示时，它仍旧有着无法比拟的方便，我们先简单写下一个来
&table id=&tb& width=&900& border=&1&&
&td&213&/td&
&td&234&/td&
&td&213&/td&
&td&234&/td&
&td&213&/td&
&td&234&/td&
&td&213&/td&
&td&234&/td&
&td&213&/td&
&td&234&/td&
&/table&这样我们来看一下效果，这里加了border来方便查看
然后我们再通过javascript实现隔行变色
&script type=&text/javascript&&
window.onload=function(){
var tb=document.getElementById(&tb&);//获取table对象
var tbody=tb.getElementsByTagName(&tbody&)[0];//获取table里面的tbody部分
var trs=tbody.getElementsByTagName(&tr&);//获取tbody部分的所有行
for(var i=0;i&trs.i++){
if(i%2==0){//判定能够被2整除的，即偶数行的颜色为灰色
trs[i].style.background=&#ccc&;//相应的这一行，对象的style的设定
&/script&这里我们再来看一下效果
就这样，一个美丽的隔行变色就是实现了，这个貌似面试题中常会出现吧，毕竟是比较基础的东西，可是我现在才学会，啊，罪过罪过.....
每一刻都是崭新的，加油编程开发子分类

我要回帖

更多关于 汽车变色是什么原理 的文章

 

随机推荐