jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法。分享給大家供大家參考,具體如下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery 奇偶變色</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script> $(document).ready(function() { $("#hacker").find("tr").addClass("odd"); $("#hacker").find("tr:even").addClass("even"); // $("tr").addClass("odd"); //$("tr:even").addClass("even"); //奇偶變色,添加樣式 //$("#hacker tr").addClass("odd"); //$("#hacker tr:even").addClass("even"); }); </script> <style> #hacker tr:hover{background-color:red;} .odd {background-color: #fff; /* pale yellow for odd rows */} .even {background-color: #000; /* pale blue for even rows */} </style> </head> <body> <table id="hacker"> <tr> <td>As You Like It</td> <td>Comedy</td> </tr> <tr> <td>All's Well that Ends Well</td> <td>Comedy</td> </tr> <tr> <td>Hamlet</td> <td>Tragedy</td> </tr> <tr> <td>Macbeth</td> <td>Tragedy</td> </tr> <tr> <td>Romeo and Juliet</td> <td>Tragedy</td> </tr> <tr> <td>Henry IV, Part I</td> <td>History</td> </tr> <tr> <td>Henry V</td> <td>History</td> </tr> </table> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jquery常用操作技巧匯總》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
- JS與jQuery實(shí)現(xiàn)隔行變色的方法
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- 基于jQuery的的一個(gè)隔行變色,鼠標(biāo)移動(dòng)變色的小插件
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- jQuery隔行變色與普通JS寫(xiě)法的對(duì)比
- jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
- jQuery實(shí)現(xiàn)的隔行變色功能【案例】
相關(guān)文章
jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)簡(jiǎn)單的球體斜拋及顏色動(dòng)態(tài)變換效果,通過(guò)jQuery+html5的canvas利用時(shí)間函數(shù)進(jìn)行實(shí)時(shí)數(shù)學(xué)運(yùn)算動(dòng)態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01jQuery+CSS 實(shí)現(xiàn)隨滾動(dòng)條增減的汽水瓶中的液體效果
一個(gè)很有意思的網(wǎng)站,那個(gè)網(wǎng)站是一家德國(guó)汽水公司的網(wǎng)站(德文神馬的),網(wǎng)站首頁(yè)有一個(gè)汽水瓶,汽水瓶里的水會(huì)隨著我們向下拉滾動(dòng)條而減少。2011-09-09jquery檢測(cè)input checked 控件是否被選中的方法
這篇文章主要介紹了jquery檢測(cè)input checked 控件是否被選中的方法,需要的朋友可以參考下2014-03-03JQuery中解決重復(fù)動(dòng)畫(huà)的方法
本篇文章主要介紹了JQuery中解決重復(fù)動(dòng)畫(huà)的辦法,有分別有圖片滾動(dòng)輪播,回到頁(yè)面頂部,聯(lián)級(jí)菜單滑出,手風(fēng)琴等效果,有需要的朋友可以來(lái)看一下。2016-10-10jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。下面通過(guò)本文給大家分享jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題,需要的朋友參考下吧2017-11-11使用jQuery時(shí)Form表單元素ID和name命名大忌
將自己的表單元素ID和name命名為了nodeName,在chrome瀏覽器下報(bào)錯(cuò),結(jié)果發(fā)現(xiàn)是表單元素命名的原因2014-03-03Jquery進(jìn)度條插件 Progress Bar小問(wèn)題解決
今天遇到一個(gè)進(jìn)度條的小問(wèn)題,搞的我小糾結(jié)了一會(huì),最后感謝同事分享文章,得以結(jié)局,呵呵,小經(jīng)驗(yàn)還是要保存的2011-07-07