jQuery實現(xiàn)表格顏色交替顯示的方法
更新時間：2015年03月09日 16:09:38 作者：hcqenjoy
這篇文章主要介紹了jQuery實現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)表格顏色交替顯示的方法。分享給大家供大家參考。具體實現(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實現(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>寂寞廣場</td>
<td>魏春亮</td>
<td>同學(xué)錄</td>
</tr>
<tr>
<td>淘寶UED</td>
<td>淘寶</td>
<td>經(jīng)常購物</td>
</tr>
</tbody>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實現(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>寂寞廣場</td>
<td>魏春亮</td>
<td>同學(xué)錄</td>
</tr>
<tr>
<td>淘寶UED</td>
<td>淘寶</td>
<td>經(jīng)常購物</td>
</tr>
</tbody>
</table>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- JQuery獲取樣式中的background-color顏色值的問題
- jquery使用ColorBox彈出圖片組瀏覽層實例演示
- Jquery顏色選擇器ColorPicker實現(xiàn)代碼
- Colortip基于jquery的信息提示框插件在IE6下面的顯示問題修正方法
- JQuery 拾色器插件發(fā)布-jquery.icolor.js
- jquery衣服顏色選取插件效果代碼分享
- JQuery實現(xiàn)動態(tài)適時改變字體顏色的方法
- jQuery實現(xiàn)鼠標(biāo)滑過Div層背景變顏色的方法
- jquery修改網(wǎng)頁背景顏色通過css方法實現(xiàn)
- jquery獲取css的color值返回RGB的方法
相關(guān)文章
jQuery實現(xiàn)鼠標(biāo)滑過圖片移動特效
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)滑過圖片移動特效，鼠標(biāo)移動到圖片上時圖片向上動一下，等到鼠標(biāo)離開后，圖片又返回到原來位置,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JQuery是個不錯的框架，以下總結(jié)了5個每個網(wǎng)站開發(fā)者都應(yīng)該知道的小技巧，都是一些非常不錯的，經(jīng)常能用得到的。2010-01-01
JQuery對ASP.NET MVC數(shù)據(jù)進行更新刪除
這篇文章主要介紹了JQuery對ASP.NET MVC數(shù)據(jù)進行更新刪除的相關(guān)資料,需要的朋友可以參考下2016-07-07
本文主要介紹了常用的幾個JQuery代碼片段。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
jquery 顯示*天*時*分*秒實現(xiàn)時間計時器
用jquery實現(xiàn)時間計時器,從之前的某個時間段到現(xiàn)在距離多少天多少時多少分多少秒，示例代碼如下，大家拷貝即可使用2014-05-05
jQuery選中select控件 無法設(shè)置selected的解決方法
select 控件的 option用jQuery動態(tài)添加，然后選中某項時，IE6不能執(zhí)行（火狐沒問題），用try{}catch(err){alert(err.description);}提示為“無法設(shè)置selected屬性 未指明的錯誤”2010-09-09
display:none和visible:hidden都能把網(wǎng)頁上某個元素隱藏起來，而jQuery的顯示和隱藏又有哪些方法，在本文將為大家詳細(xì)介紹下，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了jQuery-each()方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)者，小編推薦使用返回list集合的方法，具體原因大家可以根據(jù)本文學(xué)習(xí)下2016-08-08
這篇文章主要介紹了JQuery的ON()方法支持的所有事件羅列,本文列出了所有ON()方法支持的事件,摘自jQuery1.8.3的源碼,比較權(quán)威,需要的朋友可以參考下2015-02-02