• jquery 表格(鼠标悬停改变改变行背景+隔行换色)


    NUM1:鼠标悬停改变改变行背景

    NUM2:隔行换色

    HTML:

    <table border="1">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>小文</td>
                        <td>20</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>小李</td>
                        <td>21</td>
                        <td></td>
                    </tr>
                    <tr>
                       <td>小慧</td>
                        <td>21</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>琪琪</td>
                        <td>19</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>小勇</td>
                        <td>22</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>馨儿</td>
                        <td>23</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>小鹏</td>
                        <td>21</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>鸭梨山大</td>
                        <td>30</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

    CSS:

    .hover{
                    background-color: #00f;
                    color: #fff;
                }

    NUM1's jquery code:

    $('tbody tr').hover(function(){
                        $(this).find('td').addClass('hover');
                    }, function(){
                        $(this).find('td').removeClass('hover');
                    }); 

    NUM2's Jquery code:

    $('tbody tr:odd').addClass('hover');
  • 相关阅读:
    [NOI2017]游戏
    [USACO09MAR]Cleaning Up
    [POI2010]Blocks
    [JSOI2011]分特产
    [POI2001]Peaceful Commission
    BZOJ4152 [AMPPZ2014]The Captain
    Luogu P3783 [SDOI2017]天才黑客
    Luogu P3645 [APIO2015]雅加达的摩天楼
    Luogu P1613 跑路
    AGC009E Eternal Average
  • 原文地址:https://www.cnblogs.com/wenzichiqingwa/p/2799271.html
Copyright © 2020-2023  润新知