jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
更新時(shí)間：2015年03月09日 16:09:38 作者：hcqenjoy
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實(shí)現(xiàn)表格顏色的交替顯示</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".truecolor tr:odd").addClass("color1");
jQuery(".truecolor tr:even").addClass("color2");
jQuery(".truecolor tr").hover(function(){
jQuery(this).addClass("color3")
},function(){
jQuery(this).removeClass("color3")
});
});
</script>
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;}
.truecolor th {background-color:#333; color:#FFF;}
.color1 {background-color:#DDD; color:#333;}
.color2 {background-color:#EEE; color:#333;}
.color3 {background-color:#666; color:#FFF;}
</style>
</head>
<body>
<table width="450" class="truecolor">
<thead>
<tr>
<th>博客</th>
<th>作者</th>
<th>網(wǎng)址</th>
</tr>
</thead>
<tbody>
<tr>
<td>風(fēng)格之舞</td>
<td>火德</td>
<td>隔行換色</td>
</tr>
<tr>
<td>趙雷的博客</td>
<td>趙雷</td>
<td>新浪微博</td>
</tr>
<tr>
<td>寂寞廣場(chǎng)</td>
<td>魏春亮</td>
<td>同學(xué)錄</td>
</tr>
<tr>
<td>淘寶UED</td>
<td>淘寶</td>
<td>經(jīng)常購(gòu)物</td>
</tr>
</tbody>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實(shí)現(xiàn)表格顏色的交替顯示</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".truecolor tr:odd").addClass("color1");
jQuery(".truecolor tr:even").addClass("color2");
jQuery(".truecolor tr").hover(function(){
jQuery(this).addClass("color3")
},function(){
jQuery(this).removeClass("color3")
});
});
</script>
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;}
.truecolor th {background-color:#333; color:#FFF;}
.color1 {background-color:#DDD; color:#333;}
.color2 {background-color:#EEE; color:#333;}
.color3 {background-color:#666; color:#FFF;}
</style>
</head>
<body>
<table width="450" class="truecolor">
<thead>
<tr>
<th>博客</th>
<th>作者</th>
<th>網(wǎng)址</th>
</tr>
</thead>
<tbody>
<tr>
<td>風(fēng)格之舞</td>
<td>火德</td>
<td>隔行換色</td>
</tr>
<tr>
<td>趙雷的博客</td>
<td>趙雷</td>
<td>新浪微博</td>
</tr>
<tr>
<td>寂寞廣場(chǎng)</td>
<td>魏春亮</td>
<td>同學(xué)錄</td>
</tr>
<tr>
<td>淘寶UED</td>
<td>淘寶</td>
<td>經(jīng)常購(gòu)物</td>
</tr>
</tbody>
</table>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JQuery獲取樣式中的background-color顏色值的問(wèn)題
- jquery使用ColorBox彈出圖片組瀏覽層實(shí)例演示
- Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼
- Colortip基于jquery的信息提示框插件在IE6下面的顯示問(wèn)題修正方法
- JQuery 拾色器插件發(fā)布-jquery.icolor.js
- jquery衣服顏色選取插件效果代碼分享
- JQuery實(shí)現(xiàn)動(dòng)態(tài)適時(shí)改變字體顏色的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法
- jquery修改網(wǎng)頁(yè)背景顏色通過(guò)css方法實(shí)現(xiàn)
- jquery獲取css的color值返回RGB的方法
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片移動(dòng)特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片移動(dòng)特效，鼠標(biāo)移動(dòng)到圖片上時(shí)圖片向上動(dòng)一下，等到鼠標(biāo)離開(kāi)后，圖片又返回到原來(lái)位置,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery開(kāi)發(fā)者都需要知道的5個(gè)小技巧
JQuery是個(gè)不錯(cuò)的框架，以下總結(jié)了5個(gè)每個(gè)網(wǎng)站開(kāi)發(fā)者都應(yīng)該知道的小技巧，都是一些非常不錯(cuò)的，經(jīng)常能用得到的。2010-01-01
JQuery對(duì)ASP.NET MVC數(shù)據(jù)進(jìn)行更新刪除
這篇文章主要介紹了JQuery對(duì)ASP.NET MVC數(shù)據(jù)進(jìn)行更新刪除的相關(guān)資料,需要的朋友可以參考下2016-07-07
本文主要介紹了常用的幾個(gè)JQuery代碼片段。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jquery 顯示*天*時(shí)*分*秒實(shí)現(xiàn)時(shí)間計(jì)時(shí)器
用jquery實(shí)現(xiàn)時(shí)間計(jì)時(shí)器,從之前的某個(gè)時(shí)間段到現(xiàn)在距離多少天多少時(shí)多少分多少秒，示例代碼如下，大家拷貝即可使用2014-05-05
jQuery選中select控件 無(wú)法設(shè)置selected的解決方法
select 控件的 option用jQuery動(dòng)態(tài)添加，然后選中某項(xiàng)時(shí)，IE6不能執(zhí)行（火狐沒(méi)問(wèn)題），用try{}catch(err){alert(err.description);}提示為“無(wú)法設(shè)置selected屬性 未指明的錯(cuò)誤”2010-09-09
jQuery的顯示和隱藏方法與css隱藏的樣式對(duì)比
display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)，而jQuery的顯示和隱藏又有哪些方法，在本文將為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
這篇文章主要介紹了jQuery-each()方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)者，小編推薦使用返回list集合的方法，具體原因大家可以根據(jù)本文學(xué)習(xí)下2016-08-08
這篇文章主要介紹了JQuery的ON()方法支持的所有事件羅列,本文列出了所有ON()方法支持的事件,摘自jQuery1.8.3的源碼,比較權(quán)威,需要的朋友可以參考下2015-02-02