jQuery表格隔行变色，鼠标经过变色

浏览数：44 / 时间：2015年06月09日

CSS代码：

th{ height: 30px; line-height: 20px; background: #0093D9; color: #fff;}
        td{ padding: 6px 10px; border-bottom: 1px solid #95bce2; text-align: center; vertical-align: top;}
        tr.alt td{ background: #ecf6fc;}
        tr.over td{ background: #bcd4ec;}

HTML代码：

<table class="table" width="50%" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>QQ</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>

JS代码：

$(function(){
        $(‘.table tr‘).hover(function(){
            $(this).addClass(‘over‘);
        },function(){
            $(this).removeClass(‘over‘);
            $(‘.table tr:even‘).addClass(‘alt‘);    //偶数行变色
        });

    });

实现原理：就是通过hover方法，里面有两个函数，移入、移出，移入时，添加class高亮显示，移出时移除class。隔行变色主要通过tr：even偶数行变色，tr:odd奇数行变色。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery表格隔行变色，鼠标经过变色