首页 > Web开发 > 详细

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

时间:2015-02-26 14:42:32      阅读:248      评论:0      收藏:0      [点我收藏+]

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>zhangsan@qq.com</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>zhangsan@qq.com</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>zhangsan@qq.com</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>zhangsan@qq.com</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>123456789</td>
                <td>zhangsan@qq.com</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表格隔行变色,鼠标经过变色

原文:http://www.cnblogs.com/bokebi520/p/4301152.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!