表格隔行变色

表格的代码如下：

<table id="data">
            <thead>
                <tr>
                    <th>姓名th>
                    <th>工资th>
                    <th>入职时间th>
                    <th>操作th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>Tomtd>
                    <td>$3500td>
                    <td>2010-10-25td>
                    <td>
                        <a href="javascript:void(0)">删除a>
                    td>
                tr>
                <tr>
                    <td>Marytd>
                    <td>$3400td>
                    <td>2010-12-1td>
                    <td>
                        <a href="javascript:void(0)">删除a>
                    td>
                tr>
                <tr>
                    <td>Kingtd>
                    <td>$5900td>
                    <td>2009-08-17td>
                    <td>
                        <a href="javascript:void(0)">删除a>
                    td>
                tr>
                <tr>
                    <td>Scotttd>
                    <td>$3800td>
                    <td>2012-11-17td>
                    <td>
                        <a href="javascript:void(0)">删除a>
                    td>
                tr>
                <tr>
                    <td>Smithtd>
                    <td>$3100td>
                    <td>2014-01-27td>
                    <td>
                        <a href="javascript:void(0)">删除a>
                    td>
                tr>
                <tr>
                    <td>Allentd>
                    <td>$3700td>
                    <td>2011-12-05td>
                    <td>
                        <a href="javascript:void(0)">删除a>
                    td>
                tr>
            tbody>
        table>

设置表格的样式：

　　　　#data {
            width: 600px;
        }
        
        #data,
        td,
        th {
            border-collapse: collapse;
            border: 1px #AAAAAA solid;
        }
        
        td,th {
            height: 28px;
        }
        
        
        #data thead {
            background: #333399;
            color: #FFFFFF;
        }

效果图如下：

隔行变色、隔列变色类似：

实现方式有三种：

第一种，在css中设置：

#data>tbody>tr>td:nth-child(odd){
    background-color: #ccccff;
}

剩下的是通过js设置：

1、通过选择器

$("table>tbody>tr>td:odd").css("background","#ccccff");

2、通过添加class属性

.odd {
    background-color: #ccccff;
}
$("table>tbody>tr>td:odd").addClass("odd")
第二种添加class属性
$('#data>tbody>tr:odd').attr('class', 'odd')

效果图：