jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
<!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=utf-8" /> <title>使用jquery設(shè)置表格樣式</title> <style> .even{ background-color:red; } .odd{ background-color:green; } .selected{ background-color:#FF6; } .se{ background-color:#666; } </style> <script language="javascript" src="../../include/jquery.js"></script> <script> $(document).ready(function(){ //隔行表色 $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); //點(diǎn)擊變色 $("tr").toggle( function(){ $(this).addClass("selected"); },function (){ $(this).removeClass("selected"); } ); //滑動(dòng)變色 $("tr").mouseover(function (){ $(this).addClass("se"); }).mouseout(function (){ $(this).removeClass("se"); }); }); </script> </head> <body> <table width="500" border="1" align="center"> <tr> <td></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
以上這篇jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery 行背景顏色的交替顯示(隔行變色)實(shí)現(xiàn)代碼
- JS與jQuery實(shí)現(xiàn)隔行變色的方法
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery實(shí)現(xiàn)簡(jiǎn)單隔行變色的方法
- 基于jQuery的的一個(gè)隔行變色,鼠標(biāo)移動(dòng)變色的小插件
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- jQuery隔行變色與普通JS寫法的對(duì)比
- jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
- jQuery實(shí)現(xiàn)的隔行變色功能【案例】
相關(guān)文章
jquery實(shí)現(xiàn)簡(jiǎn)單實(shí)用的輪播器
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單實(shí)用的輪播器制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果
這篇文章主要介紹了利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12jQuery實(shí)現(xiàn)長(zhǎng)文字部分顯示代碼
在網(wǎng)頁上只有一個(gè)小區(qū)域,但是說明性的文字又很長(zhǎng),下面這段腳本實(shí)現(xiàn)的是長(zhǎng)文字的部分顯示,有類似需求的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05使用jQuery實(shí)現(xiàn)的擲色子游戲動(dòng)畫效果
大家一定都玩過擲色子的游戲,今天我給大家分享的是如何使用jQuery來實(shí)現(xiàn)擲色子的動(dòng)畫效果,通過jQuery的animate()自定義動(dòng)畫函數(shù)并結(jié)合CSS背景圖片切換實(shí)現(xiàn)的動(dòng)畫效果2014-03-03jQuery(js)獲取文字寬度(顯示長(zhǎng)度)示例代碼
今天遇到了獲取文字寬度的問題,在網(wǎng)上找到了不錯(cuò)的方法并成功使用到了項(xiàng)目中,有類似情況的朋友可以參考下2013-12-12Juqery Html(),append()等方法的Bug解決方法
標(biāo)題中說是jquery中的Bug,只是個(gè)人這么認(rèn)為,先申明一下!2010-12-12基于jquery的彈出提示框始終處于窗口的居中位置(類似于alert彈出框的效果)
之前寫的代碼,都是在當(dāng)前窗口位于居中,可是一旦窗口縮小或者放大都不是位于居中的位置了,但是一直想寫的一個(gè)類似于alert彈出窗口的效果。2011-09-09