jquery 雙色表格實(shí)現(xiàn)代碼
更新時(shí)間：2009年12月08日 00:45:23 作者：
上次用javascript實(shí)現(xiàn)了上色表格,見(jiàn)<JS實(shí)現(xiàn)雙色表格>。但通過(guò)jQuery強(qiáng)大的選擇器可更加簡(jiǎn)潔，優(yōu)雅的實(shí)現(xiàn)。
http://www.fzitv.net/article/21027.htm
不多說(shuō)了，直接給代碼
代碼
<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'); //表格標(biāo)題
$('tr:even:gt(0)').css('background','yellow'); //偶數(shù)行,且行數(shù)大于0(即標(biāo)題)
$('tr:odd').css('background','olive'); //奇數(shù)行
});
</script>
</head>
<body>
<center>
<table>
<tr id="th">
<th>姓名</th>
<th>科目</th>
<th>成績(jī)</th>
</tr>
<tr>
<td>張三</td>
<td>語(yǔ)文</td>
<td>90</td>
</tr>
<tr>
<td>張三</td>
<td>數(shù)學(xué)</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>數(shù)學(xué)</td>
<td>68</td>
</tr>
<tr>
<td>王五</td>
<td>英語(yǔ)</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>
不多說(shuō)了，直接給代碼
代碼
復(fù)制代碼 代碼如下:
<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'); //表格標(biāo)題
$('tr:even:gt(0)').css('background','yellow'); //偶數(shù)行,且行數(shù)大于0(即標(biāo)題)
$('tr:odd').css('background','olive'); //奇數(shù)行
});
</script>
</head>
<body>
<center>
<table>
<tr id="th">
<th>姓名</th>
<th>科目</th>
<th>成績(jī)</th>
</tr>
<tr>
<td>張三</td>
<td>語(yǔ)文</td>
<td>90</td>
</tr>
<tr>
<td>張三</td>
<td>數(shù)學(xué)</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>數(shù)學(xué)</td>
<td>68</td>
</tr>
<tr>
<td>王五</td>
<td>英語(yǔ)</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
對(duì)于jQuery對(duì)象，只是把each方法簡(jiǎn)單的進(jìn)行了委托：把jQuery對(duì)象作為第一個(gè)參數(shù)傳遞給jQuery的each方法.換句話說(shuō)：jQuery提供的each方法是對(duì)參數(shù)一提供的對(duì)象的中所有的子元素逐一進(jìn)行方法調(diào)用2010-08-08
jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標(biāo)就是幫助web開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。2014-07-07
這里給大家推薦9款炫酷的基于jquery的頁(yè)面特效，都是本站比較熱門的效果，這里整理出來(lái)分享給大家，也方便小伙伴們對(duì)比查看2014-12-12
jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果
這篇文章主要介紹了jquery實(shí)現(xiàn)企業(yè)定位式導(dǎo)航效果2018-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery插件ajaxFileUpload使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery實(shí)現(xiàn)流動(dòng)虛線框的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)流動(dòng)虛線框的方法,可實(shí)現(xiàn)百度UEditor首頁(yè)流動(dòng)虛線框的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery自帶的一些常用方法總結(jié),包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以參考下2014-09-09
jquery帶翻頁(yè)動(dòng)畫的電子雜志代碼分享
jquery帶翻頁(yè)動(dòng)畫的電子雜志是一款jquery.booklet電子書(shū)小冊(cè)子帶翻頁(yè)動(dòng)畫的電子雜志書(shū)本，感興趣的小伙伴們可以參考一下2015-08-08
jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實(shí)例形式分析了jQuery插件simplePagination實(shí)現(xiàn)表單分頁(yè)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04
jQuery 順便學(xué)習(xí)下CSS選擇器 奇偶匹配nth-child(even)
今天學(xué)習(xí)jQuery,看到nth-child(even)用法，特意找了下這個(gè)選擇器的用法,在CSS3標(biāo)準(zhǔn)中，用法很強(qiáng)大。2010-05-05