[学习交流] 分享一个表单隔行变色的代码

分享一个表单隔行变色的代码

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
    <style type="text/css">
		*{font-size:9pt;border:0;margin:0;padding:0;}
		body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;}
		table{border-collapse:collapse;border-spacing: 0;}		
		.tablelist{border:solid 1px  #000000; width:100%; clear:both;}		
		.tablelist th{ background-color:#000000; color: #F5F5F5; height:34px; line-height:34px; border-bottom:solid 1px #b6cad2; text-indent:11px; text-align:left;}		
		.tablelist td{line-height:35px; text-indent:11px; border-right: dotted 1px #c7c7c7;}					
    </style>	
	<script type="text/javascript">
	window.onload = function(){
		var c1="#F6F6F6";
		var c2="#FFFFFF";
		var ch="#DDFFFD";
		var trs=document.getElementsByTagName('tr');
		for (var i=0;i<trs.length;i++){
			if (i%2==0){
				trs[i].style.background=c1;
				trs[i].onmouseover=function(){
					this.style.background=ch;}
				trs[i].onmouseout=function(){
					this.style.background=c1;}
			}else{ 
				trs[i].style.background=c2;
				trs[i].onmouseover=function(){
					this.style.background=ch;}
				trs[i].onmouseout=function(){
					this.style.background=c2;}
			}
		}	
	}
</script>
</head>
<body>
    <div  style="padding:10px 18px;">    
		<table class="tablelist">
			<thead>
				<tr>
					<th>编号</th>
					<th>标题</th>
					<th>用户</th>
					<th>籍贯</th>
					<th>发布时间</th>
					<th>是否审核</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>20130908</td>
					<td>王金平幕僚：马英九声明字字见血 人活着没意思</td>
					<td>admin</td>
					<td>江苏南京</td>
					<td>2013-09-09 15:05</td>
					<td>已审核</td>
					<td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink"> 删除</a></td>
				</tr> 
				<tr> 
					<td>20130907</td>
					<td>温州19名小学生中毒流鼻血续：周边部分企业关停</td>
					<td>uimaker</td>
					<td>山东济南</td>
					<td>2013-09-08 14:02</td>
					<td>未审核</td>
					<td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
				</tr>
				<tr>
					<td>20130906</td>
					<td>社科院:电子商务促进了农村经济结构和社会转型</td>
					<td>user</td>
					<td>江苏无锡</td>
					<td>2013-09-07 13:16</td>
					<td>未审核</td>
					<td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
				</tr>
			</tbody>
		</table>
     </div>  
</body>

</html>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 分享一个 表单 隔行变色的代码

0 个回复

[学习交流] 分享一个表单隔行变色的代码