js实现单双行以不同颜色显示 -

lwcumt

浏览: 20851 次
性别:
来自: 徐州

最近访客更多访客>>

shd_zht

hongmin118

bigguo

lanyuanjun

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (10)

社区版块

存档分类

js实现单双行以不同颜色显示

javascript

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
		<title>单双行显示不同的颜色</title>
		<!--下面为javascript代码-->
		<script type = "text/javascript">
						window.onload = function color(){//窗口加载时调用
				var table = document.getElementById("person");//根据table的 id 属性值获得对象
				var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表
				for(var i = 0; i < rows.length; i++){
				 	if(i % 2 == 0){
				  		rows[i].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3
				    }
				    else{
				     	rows[i].style.backgroundColor = "White";//单数行时背景色为white
				 	}
				}
			}
		</script>
		<!--下面为css代码-->
		<style type = "text/css">
			#person
				{
					border-style:1px solid;
					border-color:blue;
					font-weight:bold;
					font-family:楷体,Arial, Helvetica, sans-serif;
					border-collapse:collapse;
					margin:auto;
				}
			#person th 
				{
					border:1px solid;
					padding:3px 7px 2px 7px;
					background-color:#A7C942;
					color:#ffffff;
					text-align:center;
				}
			#person td 
				{
					border-style:solid;
					border-width:1px;
					text-align:center;
				}
		</style>
	</head>
	<body>
		<table id = "person" align = "center" width = "90%" height = "200">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>电话</th>
				<th>爱好</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>33333333</td>
				<td>睡觉</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>44444444</td>
				<td>旅游</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>女</td>
				<td>55555555</td>
				<td>购物</td>
			</tr>
			<tr>
				<td>赵六</td>
				<td>男</td>
				<td>66666666</td>
				<td>看美女</td>
			</tr>
		</table>
	</body>
</html>

分享到：