jQuery應用實例2：表格隔行換色

-Advertisement-

這裡是用JS實現的：http://www.cnblogs.com/xuyiqing/p/8376312.html 接下來利用上一篇提到的選擇器利用jQuery實現：發現原來多行代碼這裡只需要兩行： <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

這裡是用JS實現的：http://www.cnblogs.com/xuyiqing/p/8376312.html

接下來利用上一篇提到的選擇器利用jQuery實現：

發現原來多行代碼這裡只需要兩行：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格隔行換色</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("tbody>tr:even").css("background-color","pink");
                $("tbody>tr:odd").css("background-color","aqua");
            });
        </script>
        
        <style>
            
        </style>

    </head>

    <body>
        <table border="1" width="500" height="50" align="center" id="tbl">
            <thead>
                <tr>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>張三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>小明</td>
                    <td>29</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>小紅</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>小剛</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>

</html>

View Code

更好的方式是直接為標簽添加類：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格隔行換色</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("tbody>tr:even").addClass("even");
                $("tbody>tr:odd").addClass("odd");
            });
        </script>
        
        <style>
            .even{
                background-color: pink;
            }
            .odd{
                background-color: aqua;
            }
        </style>

    </head>

    <body>
        <table border="1" width="500" height="50" align="center" id="tbl">
            <thead>
                <tr>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>張三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>小明</td>
                    <td>29</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>小紅</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>小剛</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>

</html>

View Code

實際開發中是將樣式寫入css文件中link引入的，

這裡為了方便展示寫在一個文件中

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Android開發——Notification通知的使用及NotificationCopat.Builder常用設置API

想要看全部設置的請看這一篇【轉】NotificationCopat.Builder全部設置常用設置：設置屬性說明 setAutoCancel(boolean autocancel) 設置點擊信息後自動清除通知 setContent(RemoteView view) 設置自定義通知 setCo ...
使用OCLint和Sonar對iOS代碼分析和質量管理

OCLint 是一個強大的靜態代碼分析工具，可以用來提高代碼質量，查找潛在的bug，主要針對c,c++和Objective-c的靜態分析。 Sonar 是一個用於代碼質量管理的開放平臺。通過插件機制，Sonar 可以集成不同的測試工具，代碼分析工具，以及持續集成工具。 1 brew install ...
Android帶有粘性頭部的ScrollView

前言，一天在點外賣的時候，註意到餓了麽列表頁的滑動效果不錯，但是覺得其中的手勢滑動還是挺複雜的，正好又碰到了在熟悉Touch事件的理解當中，所以就抽空對著餓了麽的列表頁面嘗試寫寫這個效果 1.先貼一個實現的效果圖邏輯是當外部的ScrollView沒有滑到底部的時候，往上滑動的時候，是滑動外部的Sc ...
小程式客服消息

看到很多小程式里，點客服，提示關註公眾號，比如製作器里這個功能，能夠自動引導關註公眾號，圖文體驗非常好，研究了小程式客服介面後，我們就自己把它做成一個工具了，方便小程式的運營人員。芝麻小客服體驗傳送門 http://xiaokefu.hotapp.cn 特點： (1)不需要開發，只需要在微信的小程 ...
Vue精簡版風格指南

[1]組件名稱 [2]組件相關 [3]prop [4]指令及特性 [5]屬性 [6]謹慎使用 ...
jQuery應用實例3：全選、二級聯動

全選：這裡是用JS實現的：http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery則會方便很多： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選和全不選</tit ...
[JS] 一個三位數的百位，十位，個位互換（從大到小，從小到大）

三位數的百位，十位，個位從大到小進行互相交換代碼，JS代碼如下。 ...
小劉同學的第三十七篇博文

在家裡，不去自習，效率比之前在學校圖書館差太多了。。。自己特別容易分神，而且不是很想學習，不是很想寫代碼。真的很惱火，為什麼大學里把高中三年養成的那麼好的自律給丟掉了，現在走神變得相當頻繁，也靜不下心來寫東西，真是，哎，不多說了，剩下的就寫進日記里吧，畢竟這裡是談技術的地方。在8點半左右完成了h ...