首页 > 代码库 > js实现隔行变色-------Day40
js实现隔行变色-------Day40
就这样开始了自己的第二个项目,业绩员考评系统,一进入项目组,首先要开始的,又是这痛苦的界面设计,完全不能改变现有的模板,只能在现有基础上进行发挥,我可怜的审美在这狭小的空间里突然就这样无能为力了,好吧,总有些地方还是需要加些效果的,像这种隔行变色,不就很实用嘛。
table在这个div+css肆虐的时代有些没落了,但是碰到多列数据显示时,它仍旧有着无法比拟的方便,我们先简单写下一个来
<table id="tb" width="900px;" border="1"> <tbody> <tr> <td>213</td> <td>234</td> </tr> <tr> <td>213</td> <td>234</td> </tr> <tr> <td>213</td> <td>234</td> </tr> <tr> <td>213</td> <td>234</td> </tr> <tr> <td>213</td> <td>234</td> </tr> </tbody> </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.length;i++){ if(i%2==0){//判定能够被2整除的,即偶数行的颜色为灰色 trs[i].style.background="#ccc";//相应的这一行,对象的style的设定 } } }; </script>这里我们再来看一下效果
就这样,一个美丽的隔行变色就是实现了,这个貌似面试题中常会出现吧,毕竟是比较基础的东西,可是我现在才学会,啊,罪过罪过.....
每一刻都是崭新的,加油
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。