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

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: #90EE90;/*偶数行背景浅绿*/}
tr.over td{ background: #bcd4ec;/*高亮背景浅蓝*/}
.click{background:orange;/*点击背景橘黄*/}

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:even').addClass('alt'); //偶数行变色，奇数行变色用tr:odd
$('.table tr:first').css('color','white'); //第一行文字变成白色
$('.table tr:last').css('color','red'); //最后一行文字颜色变成红色
$('.table tr:eq(1)').css('background','yellow'); //让第一个tr所在的行变红，默认从0开始

$('.table tr').hover(function(){
//鼠标移入
$(this).addClass('over');
},function(){
//鼠标移出
$(this).removeClass('over');
});
// 点击变色
$('.table tr').click(function(){
$(this).toggleClass('click').removeClass('alt'); //点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt").
});
$('.table tr:even').addClass('alt'); //给class为table的表格的偶数行添加class值为alt

});

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