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