欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測試可用】

 更新時(shí)間：2016年08月20日 14:14:21   作者：xiangqian0505  
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法,可實(shí)現(xiàn)表格隔行變色以及鼠標(biāo)滑過與點(diǎn)擊時(shí)變色的功能,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素樣式動(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>湖南長沙</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>湖南長沙</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>湖南長沙</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常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 基于jquery擴(kuò)展漂亮的下拉框可以二次修改

    基于jquery擴(kuò)展漂亮的下拉框可以二次修改

    以往我在使用下拉框控件老是為了樣式丑陋而煩惱，現(xiàn)在分享這個(gè)控件，喜歡的朋友可以進(jìn)行二次修改，達(dá)到你想要的效果
    2013-11-11
  • jquery網(wǎng)頁元素拖拽插件效果及實(shí)現(xiàn)

    jquery網(wǎng)頁元素拖拽插件效果及實(shí)現(xiàn)

    效果說明：配合已有css樣式，載入插件后，網(wǎng)頁元素可以隨意在窗口內(nèi)拖拽，設(shè)置了原位置半透明和拖拽半透明的效果選項(xiàng)，可根據(jù)需要選擇。另外，當(dāng)頁面上有多個(gè)可拖拽元素時(shí)，可以載入另外一個(gè)用于設(shè)置z-index的插件，模擬windows窗口點(diǎn)擊置頂效果。
    2013-08-08
  • jQuery中g(shù)et方法用法分析

    jQuery中g(shù)et方法用法分析

    這篇文章主要介紹了jQuery中g(shù)et方法用法,結(jié)合實(shí)例形式分析了jQuery的ajax交互中g(shù)et方法的功能、參數(shù)、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-12-12
  • jquery.zclip輕量級(jí)復(fù)制失效問題

    jquery.zclip輕量級(jí)復(fù)制失效問題

    本文主要介紹了解決jquery.zclip輕量級(jí)復(fù)制失效問題的工作原理及方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
    2017-01-01
  • 點(diǎn)擊表單提交時(shí)出現(xiàn)jQuery沒有權(quán)限的解決方法

    點(diǎn)擊表單提交時(shí)出現(xiàn)jQuery沒有權(quán)限的解決方法

    擊表單提交的時(shí)候會(huì)出現(xiàn) jQuery 沒有權(quán)限，試了一下jquery自帶的json方式提交成功
    2014-07-07
  • jQuery 獲取屏幕高度、寬度的簡單實(shí)現(xiàn)案例

    jQuery 獲取屏幕高度、寬度的簡單實(shí)現(xiàn)案例

    下面小編就為大家?guī)硪黄猨Query 獲取屏幕高度、寬度的簡單實(shí)現(xiàn)案例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-05
  • jQuery中值得注意的trigger方法淺析

    jQuery中值得注意的trigger方法淺析

    在前端頁面開發(fā)中,我們有時(shí)候希望能自定執(zhí)行一些人性化操作,比如鼠標(biāo)不用點(diǎn)擊自動(dòng)就能點(diǎn)擊等操作,利用傳統(tǒng)的js語言需要編寫復(fù)雜的代碼才能實(shí)現(xiàn)此功能,這時(shí)候我們使用jquery的trigger()方法就能輕松實(shí)現(xiàn)。本文就給大家詳細(xì)介紹了關(guān)于jQuery中值得注意的trigger方法。
    2016-12-12
  • jquery如何實(shí)現(xiàn)點(diǎn)擊空白處隱藏元素

    jquery如何實(shí)現(xiàn)點(diǎn)擊空白處隱藏元素

    這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊空白處隱藏元素div等方法和實(shí)現(xiàn)代碼的講解，一起學(xué)習(xí)下。
    2017-12-12
  • 教你一步步用jQyery實(shí)現(xiàn)輪播器

    教你一步步用jQyery實(shí)現(xiàn)輪播器

    相信大家應(yīng)該都會(huì)看到在各大網(wǎng)站上都有一個(gè)輪播器的效果，于是自己不禁也想做一個(gè)，查了資料，看了輪播器的原理，慢慢的試著做了做，最終效果勉勉強(qiáng)強(qiáng)，但還是想總結(jié)出來，或許對有需要的朋友們帶來一定的幫助，下面來一起看看吧。
    2016-12-12
  • 基于jquery實(shí)現(xiàn)復(fù)選框全選，反選，全不選等功能

    基于jquery實(shí)現(xiàn)復(fù)選框全選，反選，全不選等功能

    本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼，有需要的小伙伴可以參考一下
    2015-10-10

最新評論