快捷導(dǎo)航

如何用jquery控制表格奇偶行及活動行顏色

更新時間：2014年04月20日 15:19:29 作者：

這篇文章主要介紹了如何用jquery控制表格奇偶行及活動行顏色,需要的朋友可以參考下

雖然jquery流行已經(jīng)很多年了，一直都感覺很難，也沒有花時間去學(xué)習(xí)它，只是偶爾哪天心血來潮了去看一點(diǎn)點(diǎn)，時隔多日又會忘得一干二凈。最近用到表格奇偶行不同色，不得不去再看jquery，雖然感覺還是難，但已經(jīng)不像以前一樣無從下手了。做完后不得不來感嘆一下jquery真是太牛了，不用自己再寫一大堆javascript函數(shù)去實(shí)現(xiàn)了，簡單幾句輕松搞定。

先定義好表格的奇偶行樣式，如下代碼：

復(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; 
} 

再就是頁面代碼了：

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