zoukankan html css js c++ java

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

查看全文

相关阅读:
STM32的低功耗模式
 C语言的面向对象技术
 SDIO学习
 读十倍效率开发者有感
 三极管
 压敏电阻
 freertos之任务
 tsar采集数据原理
 NTP学习路线
 使用awk提取字符串中的数字或字母

原文地址：https://www.cnblogs.com/keno32/p/5211801.html

jQuery知识点二 实现隔行变色

jQuery知识点二实现隔行变色