首頁 > 開發者 > JavaScript

使用jQuery5分鐘快速搞定雙色表格

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 

先看看這個使用jQuery做的雙色表格的效果：

 

這個雙色表格對於剛接觸網頁製作的人來說應該覺得挺專業的，不過它的確很簡單。

 

 

第一步：寫好css。

 

 

<style type="text/css">  

th {    /*表頭樣式*/  

        background:#0066FF;  

        color:#FFFFFF;  

        line-height:20px;  

        height:30px;  

}  

td {  

        padding:6px 11px;  

        border-bottom:1px solid #95bce2;  

        vertical-align:top;  

        text-align:center;  

}  

td * {    www.2cto.com

        padding:6px 11px;  

}  

tr.alt td {  

        background:#ecf6fc;  /*這行將給所有的tr加上背景色*/  

}  

   

tr.over td {  

        background:#bcd4ec;  /*這個將是滑鼠高亮行的背景色*/  

}  

</style> 

 

第二步：寫jQuery頁面載入事件：

 

 

<script type="text/javascript">  

$(function(){ 

        //給class為stripe的表格的偶數行添加class值為alt  

        $(".stripe tr:even").addClass("alt");  

        $(".stripe tr").mouseover(function(){//如果滑鼠移到class為stripe的表格的tr上時，執行函數     

             $(this).addClass("over");}).mouseout(function(){//給這行添加class值為over，並且當滑鼠一出該行時執行函數 

                 $(this).removeClass("over"); 

           }) 

});  

</script>  

 

上面的滑鼠懸浮事件採用了jQuery的鏈式操作，本來是應該這麼寫的：

 

 

$(".stripe tr").mouseover(function(){    

        $(this).addClass("over");})   

$(".stripe tr").mouseout(function(){    

        $(this).removeClass("over"); }) 

但上面的的代碼卻寫成了這樣：

 

 

$(".stripe tr").mouseover(function(){    

             $(this).addClass("over");}).mouseout(function(){   

                 $(this).removeClass("over");})  

在jQuery中，執行完mouseover或mouseout等方法之後，它會返回當前的操作對象，所以可以採用jQuery的鏈式操作。

 

下面把完整的jsp代碼貼出來MyJsp.jsp:

 

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 

<% 

String path = request.getContextPath(); 

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 

%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

  <head> 

    <base href="<%=basePath%>"> 

    <title>jQuery用幾分鐘時間搞定雙色表格</title> 

    <script type="text/javascript" src="mybag/jquery-1.4.2.min.js"></script> 

    <script type="text/javascript">  

    $(function(){ 

            //給class為stripe的表格的偶數行添加class值為alt  

            $(".stripe tr:even").addClass("alt");  

            $(".stripe tr").mouseover(function(){//如果滑鼠移到class為stripe的表格的tr上時，執行函數     

              $(this).addClass("over");}).mouseout(function(){//給這行添加class值為over，並且當滑鼠一出該行時執行函數 

                  $(this).removeClass("over"); 

            }) 

    });  

    </script>  

    <style type="text/css">  

    th {  

            background:#0066FF;  

            color:#FFFFFF;  

            line-height:20px;  

            height:30px;  

    }  

    td {  

            padding:6px 11px;  

            border-bottom:1px solid #95bce2;  

            vertical-align:top;  

            text-align:center;  

    }  

    td * {  

            padding:6px 11px;  

    }  

    tr.alt td {  

            background:#ecf6fc;  /*這行將給所有的tr加上背景色*/  

    }  

       

    tr.over td {  

            background:#bcd4ec;  /*這個將是滑鼠高亮行的背景色*/  

    }  

    </style> 

  </head> 

   

<body>  

<!--用class="stripe"來標識需要使用該效果的表格-->  

<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">   

<thead>  

  <tr>  

    <th>姓名</th>  

    <th>年齡</th>  

    <th>QQ</th>  

    <th>Email</th>  

  </tr>  

</thead>  

<tbody>  

  <tr>  

    <td>李曉紅</td>  

    <td>24</td>  

    <td>859855***</td>  

    <td>859855***@qq.com</td>  

  </tr>  

  <tr>  

    <td>雲天河</td>  

    <td>18</td>  

    <td>123456789</td>  

    <td>123456789@qq.com</td>  

  </tr>  

  <tr>  

    <td>柳夢璃</td>  

    <td>18</td>  

    <td>987654321</td>  

    <td>987654321@qq.com</td>  

  </tr>  

  <tr>  

    <td>韓菱紗</td>  

    <td>18</td>  

    <td>888888888</td>  

    <td>888888888@qq.com</td>  

  </tr>  

  <tr>  

    <td>玄霄</td>  

    <td>58</td>  

    <td>123456</td>  

    <td>123456@qq.com</td>  

  </tr>  

  <tr>  

    <td>土靈珠</td>  

    <td>1000</td>  

    <td>-10000</td>  

    <td>-10000@qq.com</td>  

  </tr>  

</tbody>  

</table>  

<p>怎麼樣?jQuery就是這麼牛x.</p>  

</body> 

</html> 

摘自 tjcyjd的專欄

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More