jQuery知识点二实现隔行变色

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>隔行变色</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center;
        }

        #tbStu {
             260px;
            border: solid 1px #666;
            background-color: #eee;
        }

            #tbStu tr {
                line-height: 23px;
            }

                #tbStu tr th {
                    background-color: #ccc;
                    color: #fff;
                }

            #tbStu .trOdd {
                background-color: #fff;
            }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#tbStu tr:nth-child(even)").addClass("trOdd");
        })
    </script>
</head>

<body>
    <table id="tbStu" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>总分</th>
            </tr>
            <tr>
                <td>1001</td>
                <td>张晓明</td>
                <td>男</td>
                <td>320</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李明启</td>
                <td>女</td>
                <td>350</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

这是css 样式的网址: http://www.w3school.com.cn/cssref/selector_nth-child.asp

jQuery知识点二 实现隔行变色

jQuery知识点二实现隔行变色