jquery 雙色表格實(shí)現(xiàn)代碼
更新時(shí)間：2009年12月08日 00:45:23 作者：
上次用javascript實(shí)現(xiàn)了上色表格,見<JS實(shí)現(xiàn)雙色表格>。但通過jQuery強(qiáng)大的選擇器可更加簡潔，優(yōu)雅的實(shí)現(xiàn)。
http://www.dbjr.com.cn/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'); //表格標(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>成績</th>
</tr>
<tr>
<td>張三</td>
<td>語文</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>英語</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>
不多說了，直接給代碼
代碼
復(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>成績</th>
</tr>
<tr>
<td>張三</td>
<td>語文</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>英語</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
jquery滾動到頂部底部是一款簡單的滾動到頂部底部控制。是一個很實(shí)用的功能，他能幫助新手和高級開發(fā)者們創(chuàng)造美好的用戶體驗(yàn)。這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
jQuery實(shí)現(xiàn)的簡單手風(fēng)琴效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單手風(fēng)琴效果,結(jié)合實(shí)例形式分析了jQuery基于事件響應(yīng)、頁面元素屬性動態(tài)操作實(shí)現(xiàn)手風(fēng)琴效果的方法,需要的朋友可以參考下2018-08-08
下面簡單介紹一下jQuery的一些特性和用法，對于學(xué)習(xí)jquery的朋友有不少幫助。2010-01-01
這篇文章主要介紹了JQuery控制圖片由中心點(diǎn)逐漸放大效果的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
前些陣子寫了個插件目的就是能夠像.net 的 Requst.QuerySting["param"]那樣獲取地址欄參數(shù)?，F(xiàn)在拿出來和大家分享。感覺這個插件還是蠻有用的。2010-10-10
如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長，所以都會設(shè)置這么一個按鈕，利用這個按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。下面通過實(shí)例代碼給大家簡單介紹一下吧2016-12-12
Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒有這數(shù)據(jù)(對象)選擇插件.比如,點(diǎn)擊input , select 元素時(shí)彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對應(yīng)的元素.2012-08-08
這篇文章主要介紹了使用jQuery獲取元素父節(jié)點(diǎn)的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了jQuery中ScrollTo用法,結(jié)合實(shí)例形式分析了jQuery中ScrollTo的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jquery獲取復(fù)選框被選中的值的方法,需要的朋友可以參考下2014-03-03