jquery_demo 表格隔行变色案例

jquery_demo 表格隔行变色案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #students {
            margin: 10px auto;
            width: 500px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        #students th,
        #students td {
            border: 1px solid black;
        }
        
        #students th {
            background-color: #FFBFFF;
            height: 40px;
        }
    </style>


</head>

<body>
    <table id="students">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>科目</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>安琪拉</td>
                <td>25</td>
                <td>语文</td>
                <td>100</td>
            </tr>
            <tr>
                <td>02</td>
                <td>亚瑟</td>
                <td>28</td>
                <td>数学</td>
                <td>60</td>
            </tr>
            <tr>
                <td>03</td>
                <td>蔡文姬</td>
                <td>30</td>
                <td>英语</td>
                <td>70</td>
            </tr>
            <tr>
                <td>04</td>
                <td>阿珂</td>
                <td>20</td>
                <td>物理</td>
                <td>80</td>
            </tr>
            <tr>
                <td>05</td>
                <td>百里守约</td>
                <td>21</td>
                <td>化学</td>
                <td>90</td>
            </tr>
        </tbody>

    </table>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        // // 奇数行的样式
        // $('tbody > tr:odd').css('background','skyblue');
        // // 偶数行的样式
        // $('tbody tr:even').css('background','purple');
        // // tbody中索引为2的tr
        // $('tbody tr:eq(2)').css('color','red');

        $('tbody > tr:odd').css('background', 'skyblue');
        $('tbody>tr:even').css('background', 'red');
        $('tbody >tr:eq(2)').css('background', 'yellow')
    </script>
</body>

</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章