表格的代碼如下：

<table id="data">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>工資</th>
                    <th>入職時間</th>
                    <th>操作</th>
                </tr>
            </
 
thead>
            <tbody>
                <tr>
                    <td>Tom</td>
                    <td>$3500</td>
                    <td>2010-10-25</td>
                    <td>
                        <a href="javascript:void(0)">刪除</a>
                    </
 
td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>$3400</td>
                    <td>2010-12-1</td>
                    <td>
                        <a href="javascript:void(0)">刪除</a>
                    </
 
td>
                </tr>
                <tr>
                    <td>King</td>
                    <td>$5900</td>
                    <td>2009-08-17</td>
                    <td>
                        <a href="javascript:void(0)">刪除</a>
                    </td>
                </tr>
                <tr>
                    <td>Scott</td>
                    <td>$3800</td>
                    <td>2012-11-17</td>
                    <td>
                        <a href="javascript:void(0)">刪除</a>
                    </td>
                </tr>
                <tr>
                    <td>Smith</td>
                    <td>$3100</td>
                    <td>2014-01-27</td>
                    <td>
                        <a href="javascript:void(0)">刪除</a>
                    </td>
                </tr>
                <tr>
                    <td>Allen</td>
                    <td>$3700</td>
                    <td>2011-12-05</td>
                    <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‘)

效果圖：

表格隔行變色