jquery隔行換色效果實(shí)現(xiàn)方法
更新時(shí)間：2015年01月15日 10:35:00 投稿：shichen2014
這篇文章主要介紹了jquery隔行換色效果實(shí)現(xiàn)方法,涉及even及odd選擇器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery隔行換色效果實(shí)現(xiàn)方法。分享給大家供大家參考。具體分析如下：
使用 jquery 來實(shí)現(xiàn)隔行換行的效果，簡單得就跟吃飯一樣。來吧，看看代碼到底有多么的簡單
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#stu tr:even").addClass("bg");
$("#stu tr:odd").addClass("bg1");
});
</script>
<style type="text/css">
#stu{width:300px;border:solid 1px green;border-spacing:0px;}
#stu th{background:#ccc;}
.bg{background:blue;}
.bg1{background:yellow;}
</style>
</head>
<body>
<table id="stu">
<tr><th>學(xué)號</th><th>姓名</th><th>專業(yè)</th></tr>
<tr><td>0812124</td><td>羊羊羊</td><td>生物工程</td></tr>
<tr><td>0812120</td><td>燕燕燕</td><td>軟件工程</td></tr>
<tr><td>0812124</td><td>王美人</td><td>計(jì)算機(jī)</td></tr>
<tr><td>0812124</td><td>海飛絲</td><td>商務(wù)英語</td></tr>
<tr><td>0812124</td><td>宋夫人</td><td>藥物研究</td></tr>
</table>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#stu tr:even").addClass("bg");
$("#stu tr:odd").addClass("bg1");
});
</script>
<style type="text/css">
#stu{width:300px;border:solid 1px green;border-spacing:0px;}
#stu th{background:#ccc;}
.bg{background:blue;}
.bg1{background:yellow;}
</style>
</head>
<body>
<table id="stu">
<tr><th>學(xué)號</th><th>姓名</th><th>專業(yè)</th></tr>
<tr><td>0812124</td><td>羊羊羊</td><td>生物工程</td></tr>
<tr><td>0812120</td><td>燕燕燕</td><td>軟件工程</td></tr>
<tr><td>0812124</td><td>王美人</td><td>計(jì)算機(jī)</td></tr>
<tr><td>0812124</td><td>海飛絲</td><td>商務(wù)英語</td></tr>
<tr><td>0812124</td><td>宋夫人</td><td>藥物研究</td></tr>
</table>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
JQuery限制復(fù)選框checkbox可選中個(gè)數(shù)的方法
這篇文章主要介紹了JQuery限制復(fù)選框checkbox可選中個(gè)數(shù)的方法,涉及jQuery操作復(fù)選框長度判斷與屬性修改的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
在使用discuzx中有一個(gè)Message以及Dialog方法來顯示信息對話框。今天寫項(xiàng)目的時(shí)候，需要一個(gè)信息對話框，所以就著手利用lightbox_me插件來寫一個(gè)做備用。2015-04-04
jQuery.clean源碼分析包括：jQuery.clean使用方法、思路分析及源碼注釋分析感興趣的朋友可以參考下2013-01-01
關(guān)于jQuery.ajax()的jsonp碰上post詳解
這篇文章主要介紹了關(guān)于jQuery.ajax()的jsonp碰上post的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要給大家分享了15款jQuery分布引導(dǎo)插件,需要的朋友可以參考下2015-02-02
JQuery操作tr和td內(nèi)容的方法實(shí)例
本文介紹了“JQuery操作tr和td內(nèi)容的方法實(shí)例”，需要的朋友可以參考一下2013-03-03
jQuery簡單實(shí)現(xiàn)上下,左右滑動(dòng)的方法
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)上下,左右滑動(dòng)的方法,涉及jQuery動(dòng)態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06
jquery實(shí)現(xiàn)兩個(gè)圖片漸變切換效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)圖片漸變切換效果的方法,涉及jquery針對圖片的顯示與隱藏效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
jquery如何實(shí)現(xiàn)在加載完iframe的內(nèi)容后再進(jìn)行操作
怎么實(shí)現(xiàn)在加載完iframe的內(nèi)容后才進(jìn)行下一步操作，通過jquery可以實(shí)現(xiàn)，為iframe添加onload事件，具體如下，喜歡的朋友不妨參考下或許對大家有所幫助2013-09-09
用jQuery向div中添加Html文本內(nèi)容的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄胘Query向div中添加Html文本內(nèi)容的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07