jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測(cè)試可用】
更新時(shí)間：2016年08月20日 14:14:21 作者：xiangqian0505
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法,可實(shí)現(xiàn)表格隔行變色以及鼠標(biāo)滑過(guò)與點(diǎn)擊時(shí)變色的功能,涉及jQuery響應(yīng)鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)改變的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="jquery-1.7.2.min.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑動(dòng),點(diǎn)擊 變色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
function() {$(this).toggleClass('selected');}
);
//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果復(fù)選框默認(rèn)情況下是選擇的，變色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 復(fù)選框
$('.cssraindemo2 tbody tr').click(
function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
}
);
//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果單選框默認(rèn)情況下是選擇的，變色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 單選框
$('.cssraindemo3 tbody tr').click(
function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked','checked');
}
);
});
//-->
</SCRIPT>
<style type="text/css">
h1 { font:bold 20px/26px Arial;}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>
<!-- demo1 -->
<h1>Demo1--隔行,滑動(dòng),點(diǎn)擊 變色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>暫住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>張山</td>
<td>男</td>
<td>浙江寧波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南長(zhǎng)沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江溫州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo2 -->
<h1>Demo2--隔行,滑動(dòng),點(diǎn)擊 變色.+ 多選框選中的行 變色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性別</th>
<th>暫住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>張山</td>
<td>男</td>
<td>浙江寧波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南長(zhǎng)沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江溫州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo3 -->
<h1>Demo3--隔行,滑動(dòng),點(diǎn)擊 變色.+ 單選框選中的行 變色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性別</th>
<th>暫住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>張山</td>
<td>男</td>
<td>浙江寧波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
<td>王五</td>
<td>男</td>
<td>湖南長(zhǎng)沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江溫州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
- jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
- JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
- jQuery動(dòng)態(tài)生成Bootstrap表格
- JQuery Ajax動(dòng)態(tài)生成Table表格
- Jquery 動(dòng)態(tài)生成表格示例代碼
- jQuery實(shí)現(xiàn)多按鈕單擊變色
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
- jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】
- jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法
相關(guān)文章
基于jQuery選擇器之表單對(duì)象屬性篩選選擇器的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery選擇器之表單對(duì)象屬性篩選選擇器實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
本篇文章主要是對(duì)判斷jQuery當(dāng)前元素是隱藏還是顯示的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下2016-11-11
真正的JQuery.ajax傳遞中文參數(shù)的解決方法
許多人在使用JQuery.ajax方法時(shí)肯定會(huì)遇到一個(gè)問(wèn)題。在編碼不是UTF-8的時(shí)候，當(dāng)傳遞的參數(shù)里有中文的時(shí)候，服務(wù)端Request的時(shí)候都會(huì)出現(xiàn)亂碼。2011-05-05
jQuery EasyUI datagrid在翻頁(yè)以后仍能記錄被選中行的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery EasyUI datagrid在翻頁(yè)以后仍能記錄被選中行的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷
使用jQuery可以更加容易地遍歷DOM的父級(jí)、子級(jí)和同級(jí)元素,這里我們就來(lái)舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷:2016-07-07
jQuery EasyUI tree 使用拖拽時(shí)遇到的錯(cuò)誤小結(jié)
在我使用tree拖拽時(shí)總是失敗，控制臺(tái)輸出了很多錯(cuò)誤。經(jīng)過(guò)問(wèn)題跟蹤分析最終找到的錯(cuò)誤原因，下面小編給大家分享下，感興趣的朋友參考下2016-10-10
jQuery網(wǎng)頁(yè)右側(cè)廣告跟隨滾動(dòng)代碼分享
這篇文章主要介紹了兩種jQuery實(shí)現(xiàn)網(wǎng)頁(yè)右側(cè)廣告跟隨滾動(dòng)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-10-10
EasyUI的doCellTip實(shí)現(xiàn)鼠標(biāo)放到單元格上提示單元格內(nèi)容
本篇文章主要介紹了easyUI的doCellTip 就是鼠標(biāo)放到單元格上有個(gè)提示的功能，對(duì)于Javascript教程感興趣的同學(xué)可以參考一下2016-08-08
詳談Ajax請(qǐng)求中的async:false/true的作用(ajax 在外部調(diào)用問(wèn)題)
下面小編就為大家?guī)?lái)一篇詳談Ajax請(qǐng)求中的async:false/true的作用(ajax返回值在外部調(diào)用問(wèn)題)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦),需要的朋友可以參考下2017-05-05