jQuery知识点二实现隔行变色

最新推荐文章于 2024-08-08 23:04:40 发布

weixin_34256074

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/keno32/p/5211801.html

版权

<!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 {
            width: 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

转载于:https://www.cnblogs.com/keno32/p/5211801.html

weixin_34256074

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery知识点二实现隔行变色

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>隔行变色</title> <script src="~/Scripts/jquery-1.8.2....
复制链接

扫一扫