快捷導(dǎo)航

jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼

更新時(shí)間：2016年05月09日 15:36:02 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧

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>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td></td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td></td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td></td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td></td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>


</body>
</html>

以上這篇jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例
下面小編就為大家?guī)?lái)一篇jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-12-12
jquery JSON的解析方式
第一次用JSON作為jquery異步請(qǐng)求的傳輸對(duì)象，結(jié)果在jquery請(qǐng)求后返回的結(jié)果是字符串還是json對(duì)象上折騰了半天。等到問(wèn)題解決了，也大致明白怎么個(gè)意思了，歸根結(jié)底還是對(duì)jquery對(duì)相關(guān)json對(duì)象獲取的理解有所偏差。
2009-07-07
jQuery 表格隔行變色代碼[修正注釋版]
代碼比較精簡(jiǎn)，大家可以了解下jquery的對(duì)象控制方法
2008-11-11
JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
這篇文章主要是對(duì)JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置的示例代碼進(jìn)行了介紹。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
淺析jQuery中使用$所引發(fā)的問(wèn)題
這篇文章主要介紹了淺析jQuery中使用$所引發(fā)的問(wèn)題的相關(guān)資料,f非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
jQuery each函數(shù)源碼分析
jquery each函數(shù)的使用頻率非常高，下面給大家介紹jQuery each函數(shù)源碼分析，一起看看吧
2016-05-05
取消選中單選框radio的三種方式示例介紹
本文依賴于jQuery,其中第一種，第二種方式是使用jQuery實(shí)現(xiàn)的，第三種方式是基于JS和DOM實(shí)現(xiàn)的，感興趣的朋友可以了解下
2013-12-12
13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦
這篇文章主要介紹了13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件，非常炫酷實(shí)用，有需要的小伙伴參考下
2014-12-12
jquery zTree異步加載簡(jiǎn)單實(shí)例分享
Ztree是一個(gè)使用jQuery實(shí)現(xiàn)的JSP頁(yè)面的各種功能樹(shù)，本文介紹一個(gè)異步獲取數(shù)據(jù)到下拉樹(shù)的實(shí)現(xiàn)方式,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)ztree有所幫助
2013-02-02