快捷導(dǎo)航

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)方法如下：

<!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>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)
jQuery總是只返回第一個(gè)類標(biāo)簽的值，所以無法達(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ù)列表（可搜索、可分頁）
select2是一款jQuery插件，是普通form表單select組件的升級(jí)版。接下來通過本文給大家介紹jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表（可搜索、可分頁），需要的的朋友參考下吧
2017-05-05
Jqgrid表格隨窗口大小改變而改變的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jqgrid表格隨窗口大小改變而改變的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jQuery控制控件文本的長(zhǎng)度的操作方法
這篇文章主要介紹了jQuery控制控件文本的長(zhǎng)度的操作方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2016-12-12
JQuery ZTree使用方法詳解
這篇文章主要為大家詳細(xì)介紹了JQuery ZTree使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
深入探秘jquery瀑布流的實(shí)現(xiàn)
瀑布流就是像瀑布一樣的網(wǎng)站——豐富的網(wǎng)站內(nèi)容，特別是絢美的圖片會(huì)讓你流連忘返。你在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。瀑布流網(wǎng)站是新興的一種網(wǎng)站模式——她的典型代表是pinterest、美麗說、蘑菇街這類型的網(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)操作頁面元素切換的動(dòng)畫效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jquery 鍵盤事件的使用方法詳解
這篇文章主要介紹了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