jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
更新時(shí)間：2015年03月09日 16:09:38 作者：hcqenjoy
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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>
<title>jQuery實(shí)現(xiàn)表格顏色的交替顯示</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".truecolor tr:odd").addClass("color1");
jQuery(".truecolor tr:even").addClass("color2");
jQuery(".truecolor tr").hover(function(){
jQuery(this).addClass("color3")
},function(){
jQuery(this).removeClass("color3")
});
});
</script>
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;}
.truecolor th {background-color:#333; color:#FFF;}
.color1 {background-color:#DDD; color:#333;}
.color2 {background-color:#EEE; color:#333;}
.color3 {background-color:#666; color:#FFF;}
</style>
</head>
<body>
<table width="450" class="truecolor">
<thead>
<tr>
<th>博客</th>
<th>作者</th>
<th>網(wǎng)址</th>
</tr>
</thead>
<tbody>
<tr>
<td>風(fēng)格之舞</td>
<td>火德</td>
<td>隔行換色</td>
</tr>
<tr>
<td>趙雷的博客</td>
<td>趙雷</td>
<td>新浪微博</td>
</tr>
<tr>
<td>寂寞廣場(chǎng)</td>
<td>魏春亮</td>
<td>同學(xué)錄</td>
</tr>
<tr>
<td>淘寶UED</td>
<td>淘寶</td>
<td>經(jīng)常購(gòu)物</td>
</tr>
</tbody>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實(shí)現(xiàn)表格顏色的交替顯示</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".truecolor tr:odd").addClass("color1");
jQuery(".truecolor tr:even").addClass("color2");
jQuery(".truecolor tr").hover(function(){
jQuery(this).addClass("color3")
},function(){
jQuery(this).removeClass("color3")
});
});
</script>
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;}
.truecolor th {background-color:#333; color:#FFF;}
.color1 {background-color:#DDD; color:#333;}
.color2 {background-color:#EEE; color:#333;}
.color3 {background-color:#666; color:#FFF;}
</style>
</head>
<body>
<table width="450" class="truecolor">
<thead>
<tr>
<th>博客</th>
<th>作者</th>
<th>網(wǎng)址</th>
</tr>
</thead>
<tbody>
<tr>
<td>風(fēng)格之舞</td>
<td>火德</td>
<td>隔行換色</td>
</tr>
<tr>
<td>趙雷的博客</td>
<td>趙雷</td>
<td>新浪微博</td>
</tr>
<tr>
<td>寂寞廣場(chǎng)</td>
<td>魏春亮</td>
<td>同學(xué)錄</td>
</tr>
<tr>
<td>淘寶UED</td>
<td>淘寶</td>
<td>經(jīng)常購(gòu)物</td>
</tr>
</tbody>
</table>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JQuery獲取樣式中的background-color顏色值的問題
- jquery使用ColorBox彈出圖片組瀏覽層實(shí)例演示
- Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼
- Colortip基于jquery的信息提示框插件在IE6下面的顯示問題修正方法
- JQuery 拾色器插件發(fā)布-jquery.icolor.js
- jquery衣服顏色選取插件效果代碼分享
- JQuery實(shí)現(xiàn)動(dòng)態(tài)適時(shí)改變字體顏色的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過Div層背景變顏色的方法
- jquery修改網(wǎng)頁(yè)背景顏色通過css方法實(shí)現(xiàn)
- jquery獲取css的color值返回RGB的方法
相關(guān)文章
jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無(wú)法獲取)
jQuery總是只返回第一個(gè)類標(biāo)簽的值，所以無(wú)法達(dá)到我們的要求，那么jQuery如何獲取同一個(gè)類標(biāo)簽的所有的值，下面與大家分享方法2014-09-09
jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng)示例
用jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表（可搜索、可分頁(yè)）
select2是一款jQuery插件，是普通form表單select組件的升級(jí)版。 接下來(lái)通過本文給大家介紹jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表（可搜索、可分頁(yè)），需要的的朋友參考下吧2017-05-05
Jqgrid表格隨窗口大小改變而改變的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jqgrid表格隨窗口大小改變而改變的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了jQuery控制控件文本的長(zhǎng)度的操作方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了JQuery ZTree使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
瀑布流就是像瀑布一樣的網(wǎng)站——豐富的網(wǎng)站內(nèi)容，特別是絢美的圖片會(huì)讓你流連忘返。你在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。瀑布流網(wǎng)站是新興的一種網(wǎng)站模式——她的典型代表是pinterest、美麗說(shuō)、蘑菇街這類型的網(wǎng)站。2016-01-01
jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法,實(shí)例分析了jQuery通過鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素切換的動(dòng)畫效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jquery 鍵盤事件的使用方法詳解的相關(guān)資料,主要介紹keydown()、keyup()、keypress()等三種方法，需要的朋友可以參考下2017-09-09
jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07