分享一个 表单 隔行变色的代码
[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>
| 
收藏
淘帖
踩
