如何用jquery控制表格奇偶行及活動(dòng)行顏色
更新時(shí)間：2014年04月20日 15:19:29 作者：
這篇文章主要介紹了如何用jquery控制表格奇偶行及活動(dòng)行顏色,需要的朋友可以參考下
雖然jquery流行已經(jīng)很多年了，一直都感覺很難，也沒有花時(shí)間去學(xué)習(xí)它，只是偶爾哪天心血來潮了去看一點(diǎn)點(diǎn)，時(shí)隔多日又會(huì)忘得一干二凈。最近用到表格奇偶行不同色，不得不去再看jquery，雖然感覺還是難，但已經(jīng)不像以前一樣無(wú)從下手了。做完后不得不來感嘆一下jquery真是太牛了，不用自己再寫一大堆javascript函數(shù)去實(shí)現(xiàn)了，簡(jiǎn)單幾句輕松搞定。
先定義好表格的奇偶行樣式，如下代碼：
body {
font-size:12px;
}
th {
color: #FFFFFF;
background: #A172AC;
}
table,table td,table th {
padding: 0.5em;
margin: 0;
border:0;
border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
background: #FBD106;
}
/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B;
}
/* hovered items */
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: #FFFFFF;
}
再就是頁(yè)面代碼了：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用jquery實(shí)現(xiàn)table奇偶行不同色</title>
<link href="style/mysql.css" rel="stylesheet" />
<script src="javascript/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//排除th標(biāo)簽，th可能是有自己特有的樣式，所以定義th樣式。
//$("tr:not(:has(th)):odd").addClass("odd");
//$("tr:not(:has(th)):even").addClass("even");
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
//如果CSS中不定義".odd:hover"和".even:hover"就需要toggleClass()。
/*
$("tr").mouseover(function () {
$(this).toggleClass(".hover");
});
$("tr").mouseout(function () {
$(this).toggleClass(".hover");
});
*/
});
</script>
</head>
<body>
<div id="outline">
<table>
<tr id="tth">
<th>data</th>
<th>data</th>
<th>data</th>
<th>data</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</body>
</html>
如果不需要鼠標(biāo)事件，只需奇偶行不同色直接可以用CSS搞定。
table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}
table tr:nth-child(odd) td,
table tr:nth-child(odd) th {
background-color: #E6453B;
}
先定義好表格的奇偶行樣式，如下代碼：
復(fù)制代碼 代碼如下:
body {
font-size:12px;
}
th {
color: #FFFFFF;
background: #A172AC;
}
table,table td,table th {
padding: 0.5em;
margin: 0;
border:0;
border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
background: #FBD106;
}
/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B;
}
/* hovered items */
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: #FFFFFF;
}
再就是頁(yè)面代碼了：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用jquery實(shí)現(xiàn)table奇偶行不同色</title>
<link href="style/mysql.css" rel="stylesheet" />
<script src="javascript/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//排除th標(biāo)簽，th可能是有自己特有的樣式，所以定義th樣式。
//$("tr:not(:has(th)):odd").addClass("odd");
//$("tr:not(:has(th)):even").addClass("even");
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
//如果CSS中不定義".odd:hover"和".even:hover"就需要toggleClass()。
/*
$("tr").mouseover(function () {
$(this).toggleClass(".hover");
});
$("tr").mouseout(function () {
$(this).toggleClass(".hover");
});
*/
});
</script>
</head>
<body>
<div id="outline">
<table>
<tr id="tth">
<th>data</th>
<th>data</th>
<th>data</th>
<th>data</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</body>
</html>
如果不需要鼠標(biāo)事件，只需奇偶行不同色直接可以用CSS搞定。
復(fù)制代碼 代碼如下:
table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}
table tr:nth-child(odd) td,
table tr:nth-child(odd) th {
background-color: #E6453B;
}
相關(guān)文章
基于jQuery實(shí)現(xiàn)的雙11天貓拆紅包抽獎(jiǎng)效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的雙11天貓拆紅包抽獎(jiǎng)效果，在即將到來的雙十二活動(dòng)中大家也可以使用拆紅包抽獎(jiǎng)吸引消費(fèi)者，需要的朋友可以參考下2015-12-12
jquery上傳插件fineuploader上傳文件使用方法(jquery圖片上傳插件)
這篇文章主要介紹了jquery插件fineuploader上傳文件很用方法2013-12-12
jquery實(shí)現(xiàn)用戶信息修改驗(yàn)證輸入方法匯總
這篇文章主要介紹了jquery實(shí)現(xiàn)用戶信息修改驗(yàn)證輸入方法,實(shí)例匯總了jquery常用的提交、驗(yàn)證、判定、修改等相關(guān)技巧,非常實(shí)用,需要的朋友可以參考下2015-07-07
jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
jquery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式2012-06-06
做前端開發(fā)的朋友對(duì)于ajax異步更新一定印象深刻，本文主要介紹了關(guān)于ajax異步請(qǐng)求的那點(diǎn)事，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
jquery結(jié)合css實(shí)現(xiàn)返回頂部功能
在本篇文章里小編給大家整理了一篇關(guān)于jquery結(jié)合css實(shí)現(xiàn)返回頂部功能的相關(guān)文章，有興趣的朋友們可以實(shí)例測(cè)試下。2021-08-08
jquery 實(shí)現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))
jquery 實(shí)現(xiàn)全選，反選，全不選等功能，下面直接以例子進(jìn)行說明,需要的朋友可以參考下2012-10-10
本文主要介紹了jquery判斷密碼強(qiáng)度的驗(yàn)證代碼，這是一個(gè)非常常見的功能，在輸入密碼的時(shí)候提示密碼的強(qiáng)度，本文使用jQuery來實(shí)現(xiàn)，有需要的小伙伴可以參考下。2015-11-11
與大家一起分享8款精美的jQuery圖片播放插件,有興趣的朋友可以下載使用和研究；廢話不多說了，直接上這些插件,希望這些插件對(duì)你有所幫助2013-02-02
jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能
這篇文章主要介紹了jquery 實(shí)現(xiàn)拖動(dòng)文件上傳加載進(jìn)度條功能,主要用到的是HTML5的ondrop事件，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03