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)滑過(guò)高亮顯示效果代碼
- 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)條效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
jQuery實(shí)現(xiàn)長(zhǎng)文字部分顯示代碼
在網(wǎng)頁(yè)上只有一個(gè)小區(qū)域,但是說(shuō)明性的文字又很長(zhǎng),下面這段腳本實(shí)現(xiàn)的是長(zhǎng)文字的部分顯示,有類似需求的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05
基于LayUI實(shí)現(xiàn)前端分頁(yè)功能的方法
下面小編就為大家?guī)?lái)一篇基于LayUI實(shí)現(xiàn)前端分頁(yè)功能的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
使用jQuery實(shí)現(xiàn)的擲色子游戲動(dòng)畫效果
大家一定都玩過(guò)擲色子的游戲,今天我給大家分享的是如何使用jQuery來(lái)實(shí)現(xiàn)擲色子的動(dòng)畫效果,通過(guò)jQuery的animate()自定義動(dòng)畫函數(shù)并結(jié)合CSS背景圖片切換實(shí)現(xiàn)的動(dòng)畫效果2014-03-03
jQuery(js)獲取文字寬度(顯示長(zhǎng)度)示例代碼
今天遇到了獲取文字寬度的問(wèn)題,在網(wǎng)上找到了不錯(cuò)的方法并成功使用到了項(xiàng)目中,有類似情況的朋友可以參考下2013-12-12
Juqery Html(),append()等方法的Bug解決方法
標(biāo)題中說(shuō)是jquery中的Bug,只是個(gè)人這么認(rèn)為,先申明一下!2010-12-12
基于jquery的彈出提示框始終處于窗口的居中位置(類似于alert彈出框的效果)
之前寫的代碼,都是在當(dāng)前窗口位于居中,可是一旦窗口縮小或者放大都不是位于居中的位置了,但是一直想寫的一個(gè)類似于alert彈出窗口的效果。2011-09-09

