码迷,mamicode.com
首页 > Web开发 > 详细

js实现隔行变色-------Day40

时间:2014-06-18 07:04:23      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:js   前端   隔行变色   javascript   

就这样开始了自己的第二个项目,业绩员考评系统,一进入项目组,首先要开始的,又是这痛苦的界面设计,完全不能改变现有的模板,只能在现有基础上进行发挥,我可怜的审美在这狭小的空间里突然就这样无能为力了,好吧,总有些地方还是需要加些效果的,像这种隔行变色,不就很实用嘛。

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来方便查看

bubuko.com,布布扣

然后我们再通过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>
这里我们再来看一下效果

bubuko.com,布布扣

就这样,一个美丽的隔行变色就是实现了,这个貌似面试题中常会出现吧,毕竟是比较基础的东西,可是我现在才学会,啊,罪过罪过.....


每一刻都是崭新的,加油

bubuko.com,布布扣

js实现隔行变色-------Day40,布布扣,bubuko.com

js实现隔行变色-------Day40

标签:js   前端   隔行变色   javascript   

原文地址:http://blog.csdn.net/marsmile_tbo/article/details/31837367

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!