jQuery 表格隔行變色代碼[修正注釋版]
更新時間：2008年11月18日 00:24:17 作者：
代碼比較精簡，大家可以了解下jquery的對象控制方法
復制代碼 代碼如下:
<!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=gb2312" />
<title>jquery 奇偶變色</title>
<script src="http://img.jb51.net/jslib/jquery/jquery1.3.2.js"></script>
<script>
$(document).ready(function() {
$('tr').addClass('odd');
$('tr:even').addClass('even'); //奇偶變色，添加樣式
});
</script>
<style>
#hacker tr:hover{
background-color:red; //使用CSS偽類達到鼠標移入行變色的效果，比Jquery 的mouseover,hover 好用
}
.odd {
background-color: #ffc; /* pale yellow for odd rows */
}
.even {
background-color: #cef; /* pale blue for even rows */
}
</style>
</head>
<body>
<table id="hacker">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
</body>
</html>
下面是一個js版本的，需要的朋友可以參考下。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- jQuery 行背景顏色的交替顯示(隔行變色)實現(xiàn)代碼
- JS與jQuery實現(xiàn)隔行變色的方法
- 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)的隔行變色功能【案例】
相關文章
這篇文章主要介紹了jQuery實現(xiàn)的自定義輪播圖功能,結(jié)合實例形式詳細分析了輪播圖的原理、實現(xiàn)步驟及相關操作技巧,需要的朋友可以參考下2018-12-12
Jquery 實現(xiàn)Tab效果，思路就是普通的用js的思路控制的，腳本之家發(fā)布過更精簡的代碼，這個比較適合一直用js開始學用jquery控制的朋友一個參考。2010-03-03
Jquery each方法跳出循環(huán),并獲取返回值(實例講解)
這篇文章主要是對Jquery each方法跳出循環(huán),并獲取返回值進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
下面小編就為大家?guī)硪黄猨query基本選擇器匹配多個元素的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jQuery使用animate創(chuàng)建動畫用法實例
這篇文章主要介紹了jQuery使用animate創(chuàng)建動畫用法,可實現(xiàn)點擊鏈接文字隱藏及顯示文字的功能,實例分析了jquery中toggle與animate方法的使用技巧,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)硪黄P于Jquery中的事件綁定總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了jQuery中復合選擇器簡單用法,結(jié)合實例形式分析了jQuery中復合選擇器的概念、功能、應用場景及相關使用方法,需要的朋友可以參考下2018-03-03
修復jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)
這篇文章主要介紹了如何修復jQuery tablesorter無法正確排序的bug(加千分位數(shù)字后)的相關資料,需要的朋友可以參考下2016-03-03
JQuery DataTable刪除行后的頁面更新利用Ajax解決
使用Jquery的DataTable進行數(shù)據(jù)表處理非常方便，常遇到的一個問題就是刪除一行后頁面必須進行更新，下面與大家分享下使用Ajax的解決方法2013-05-05
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)無限級樹形菜單的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03