SOURCE

$(function() {
            $("tbody tr:even").addClass("even");
            $("tbody tr:odd").addClass("odd");
            $("tbody tr").hover(
                function() {
                    $(this).addClass("light");
                },
                function() {
                    $(this).removeClass("light");
                }
            );
        });

<table>
        <thead>
            <tr>
                <th>产品名称</th>
                <th>产地</th>
                <th>厂商</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>康假电视机</td>
                <td>胡州</td>
                <td>国梅电子</td>
            </tr>
            <tr>
                <td>美好微波炉</td>
                <td>北京</td>
                <td>美好集团</td>
            </tr>
            <tr>
                <td>理想电脑</td>
                <td>沈阳</td>
                <td>理想科技</td>
            </tr>
            <tr>
                <td>编程词典</td>
                <td>长春</td>
                <td>明白科技</td>
            </tr>
        </tbody>
    </table>

table {
            border: 0;
            border-collapse: collapse;
        }
        
        td {
            font: normal 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }
        
        th {
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }
        
        .odd {
            background: #cef;
        }
        
        .even {
            background: #ffc;
        }
        
        .light {
            background: #00A1DA;
        }