jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
更新時間：2016年05月09日 15:36:02 投稿：jingxian
下面小編就為大家?guī)硪黄猨Query輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
<!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設置表格樣式</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");
//點擊變色
$("tr").toggle(
function(){
$(this).addClass("selected");
},function (){
$(this).removeClass("selected");
}
);
//滑動變色
$("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輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery 行背景顏色的交替顯示(隔行變色)實現(xiàn)代碼
- JS與jQuery實現(xiàn)隔行變色的方法
- 用JQuery實現(xiàn)表格隔行變色和突出顯示當前行的代碼
- jQuery實現(xiàn)簡單隔行變色的方法
- 基于jQuery的的一個隔行變色，鼠標移動變色的小插件
- jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼
- jQuery實現(xiàn)Table表格隔行變色及高亮顯示當前選擇行效果示例
- jQuery隔行變色與普通JS寫法的對比
- jQuery實現(xiàn)隔行變色的方法分析(對比原生JS)
- jQuery實現(xiàn)的隔行變色功能【案例】
相關文章
下面小編就為大家?guī)硪黄猨query操作ID帶有變量的節(jié)點實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
第一次用JSON作為jquery異步請求的傳輸對象，結果在jquery請求后返回的結果是字符串還是json對象上折騰了半天。等到問題解決了，也大致明白怎么個意思了，歸根結底還是對jquery對相關json對象獲取的理解有所偏差。2009-07-07![jQuery 表格隔行變色代碼[修正注釋版]](http://img.jbzj.com/images/xgimg/bcimg2.png)
代碼比較精簡，大家可以了解下jquery的對象控制方法2008-11-11
JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
這篇文章主要是對JS和JQUERY獲取頁面大小,滾動條位置,元素位置的示例代碼進行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了淺析jQuery中使用$所引發(fā)的問題的相關資料,f非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復觸發(fā)方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
jquery each函數(shù)的使用頻率非常高，下面給大家介紹jQuery each函數(shù)源碼分析，一起看看吧2016-05-05
本文依賴于jQuery,其中第一種，第二種方式是使用jQuery實現(xiàn)的，第三種方式是基于JS和DOM實現(xiàn)的，感興趣的朋友可以了解下2013-12-12
13 款最熱門的 jQuery 圖像 360 度旋轉插件推薦
這篇文章主要介紹了13 款最熱門的 jQuery 圖像 360 度旋轉插件，非常炫酷實用，有需要的小伙伴參考下2014-12-12
Ztree是一個使用jQuery實現(xiàn)的JSP頁面的各種功能樹，本文介紹一個異步獲取數(shù)據(jù)到下拉樹的實現(xiàn)方式,感興趣的朋友可以了解下，或許對你學習ztree有所幫助2013-02-02