如何用jquery控制表格奇偶行及活動(dòng)行顏色
更新時(shí)間：2014年04月20日 15:19:29 作者：
這篇文章主要介紹了如何用jquery控制表格奇偶行及活動(dòng)行顏色,需要的朋友可以參考下
雖然jquery流行已經(jīng)很多年了，一直都感覺(jué)很難，也沒(méi)有花時(shí)間去學(xué)習(xí)它，只是偶爾哪天心血來(lái)潮了去看一點(diǎn)點(diǎn)，時(shí)隔多日又會(huì)忘得一干二凈。最近用到表格奇偶行不同色，不得不去再看jquery，雖然感覺(jué)還是難，但已經(jīng)不像以前一樣無(wú)從下手了。做完后不得不來(lái)感嘆一下jquery真是太牛了，不用自己再寫(xiě)一大堆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)文章
提示$ is not defined錯(cuò)誤分析及解決
$ is not defined這種提示想必在調(diào)試時(shí)經(jīng)常會(huì)遇到吧，經(jīng)過(guò)搜索查詢了一下結(jié)果是引入Jquery的順序不對(duì)，改過(guò)來(lái)就可以了，有此問(wèn)題的朋友可以參考下哈2013-04-04
屬性的類(lèi)型可以為：圖片、文本框、按鈕，然后選擇需要設(shè)置的屬性值：src、width、height、title、value等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
jQuery是一個(gè)兼容多瀏覽器的javascript框架，核心理念是write less,do more(寫(xiě)得更少,做得更多)。如今，jQuery已經(jīng)成為最流行的javascript框架，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò)55%在使用jQuery。那么作為一個(gè)前端設(shè)計(jì)師，怎么可能不來(lái)深入了解下jQuery呢，首先我們從他的總體構(gòu)架開(kāi)始吧2014-06-06
jQuery實(shí)現(xiàn)360°全景拖動(dòng)展示
360全景就是視角超過(guò)人的正常視角的圖像，而我們這里說(shuō)的全景特指水平視角360度，垂直視角180度的圖像?？梢匀翱臻g里進(jìn)行切換，達(dá)到瀏覽各個(gè)不同場(chǎng)景360全景展示的目的。2015-03-03
做了很多種方式的選擇項(xiàng)卡切換。沒(méi)有一個(gè)確定的方法。程序的魅力就在于一個(gè)[結(jié)果]有無(wú)數(shù)種[方式]去實(shí)現(xiàn)。2010-06-06
JqueryUI作為一個(gè)優(yōu)秀的前端庫(kù)，在項(xiàng)目中經(jīng)常會(huì)用到，下面小編抽點(diǎn)時(shí)間給大家介紹jQueryUI中的datepicker使用方法詳解，一起看看吧2016-05-05
jQuery中DOM常見(jiàn)操作實(shí)例小結(jié)
這篇文章主要介紹了jQuery中DOM常見(jiàn)操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)dom屬性操作、文檔操作等常用方法與操作技巧,需要的朋友可以參考下2019-08-08
jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法
下面小編就為大家?guī)?lái)一篇jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
JQuery插件iScroll實(shí)現(xiàn)下拉刷新，滾動(dòng)翻頁(yè)特效
下拉自動(dòng)加載進(jìn)行分頁(yè)的運(yùn)用越來(lái)越多，比起傳統(tǒng)的分頁(yè)該方法分頁(yè)用戶體驗(yàn)更好，布局也更簡(jiǎn)單了。目前正在使用和學(xué)習(xí)中……2014-06-06
本文匯總介紹了常見(jiàn)的jQuery選擇器知識(shí)，包含基本元素選擇器、分層選擇器、基本條件選擇器、內(nèi)容條件選擇器、可見(jiàn)性條件選擇器、屬性選擇器、子元素選擇器、表單元素選擇器、表單屬性選擇器。十分的詳盡，有需要的小伙伴參考下吧2014-11-11