jquery 双色表格实现代码

192 阅读 0 评论 127 点赞

我是靠谱客的博主苹果彩虹，最近开发中收集的这篇文章主要介绍jquery 双色表格实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

http://www.uoften.com/article/21027.htm
不多说了，直接给代码
代码

复制代码代码如下:

 
<html> 
<head> 
<title>双色表格</title> 
<style type="text/css"> 
<!-- 
table { 
border:solid 1px black; 
text-align:center; 
border-spacing:0px; 
} 
th,td { 
border:solid 1px black; 
width:100px; 
} 
--> 
</style> 
<script src="lib/jquery.js" type="text/javascript"></script> 
<script type="text/javascript" > 
$().ready(function() { 
$('tr:has(th)').css('background','violet'); //表格标题 
$('tr:even:gt(0)').css('background','yellow'); //偶数行,且行数大于0(即标题) 
$('tr:odd').css('background','olive'); //奇数行 
}); 
</script> 
</head> 
<body> 
<center> 
<table> 
<tr id="th"> 
<th>姓名</th> 
<th>科目</th> 
<th>成绩</th> 
</tr> 
<tr> 
<td>张三</td> 
<td>语文</td> 
<td>90</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>数学</td> 
<td>87</td> 
</tr> 
<tr> 
<td>李四</td> 
<td>数学</td> 
<td>68</td> 
</tr> 
<tr> 
<td>王五</td> 
<td>英语</td> 
<td>76</td> 
</tr> 
</table> 
</center> 
</body> 
</html> 