jquery 雙色表格實現(xiàn)代碼

更新時間：2009年12月08日 00:45:23 作者：

上次用javascript實現(xiàn)了上色表格,見<JS實現(xiàn)雙色表格>。但通過jQuery強大的選擇器可更加簡潔，優(yōu)雅的實現(xiàn)。

http://www.dhdzp.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'); //偶數(shù)行,且行數(shù)大于0(即標題) 
$('tr:odd').css('background','olive'); //奇數(shù)行 
}); 
</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>數(shù)學</td> 
<td>87</td> 
</tr> 
<tr> 
<td>李四</td> 
<td>數(shù)學</td> 
<td>68</td> 
</tr> 
<tr> 
<td>王五</td> 
<td>英語</td> 
<td>76</td> 
</tr> 
</table> 
</center> 
</body> 
</html> 

您可能感興趣的文章:

使用jQuery5分鐘快速搞定雙色表格的簡單實例

相關(guān)文章

JQuery中each()的使用方法說明
對于jQuery對象，只是把each方法簡單的進行了委托：把jQuery對象作為第一個參數(shù)傳遞給jQuery的each方法.換句話說：jQuery提供的each方法是對參數(shù)一提供的對象的中所有的子元素逐一進行方法調(diào)用
2010-08-08
jquery easyui使用心得
jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。
2014-07-07
推薦9款炫酷的基于jquery的頁面特效
這里給大家推薦9款炫酷的基于jquery的頁面特效，都是本站比較熱門的效果，這里整理出來分享給大家，也方便小伙伴們對比查看
2014-12-12
jquery實現(xiàn)企業(yè)定位式導航效果
這篇文章主要介紹了jquery實現(xiàn)企業(yè)定位式導航效果
2018-01-01
jQuery插件ajaxFileUpload使用詳解
這篇文章主要為大家詳細介紹了jQuery插件ajaxFileUpload使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery實現(xiàn)流動虛線框的方法
這篇文章主要介紹了jQuery實現(xiàn)流動虛線框的方法,可實現(xiàn)百度UEditor首頁流動虛線框的效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
jQuery自帶的一些常用方法總結(jié)
這篇文章主要介紹了jQuery自帶的一些常用方法總結(jié),包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以參考下
2014-09-09
jquery帶翻頁動畫的電子雜志代碼分享
jquery帶翻頁動畫的電子雜志是一款jquery.booklet電子書小冊子帶翻頁動畫的電子雜志書本，感興趣的小伙伴們可以參考一下
2015-08-08
jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實例形式分析了jQuery插件simplePagination實現(xiàn)表單分頁相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2020-04-04
jQuery 順便學習下CSS選擇器奇偶匹配nth-child(even)
今天學習jQuery,看到nth-child(even)用法，特意找了下這個選擇器的用法,在CSS3標準中，用法很強大。
2010-05-05