jquery效果-CSDN博客

本文链接：https://blog.csdn.net/fairy_lyh3259900/article/details/102779221

jQuery实现的效果

在这里插入图片描述

主要代码块

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>员工信息</title>
    <script src="jquery.js"></script>
    <style>
        table tr td{
            width: 150px;
            height: 25px;
        }
    </style>
</head>
<body>
  <script src="jquery.js"></script>
<style>
    table tr td{
        border: 1px solid;
    }
    .odd{
        background-color: hotpink;
    }
    .even{
        background-color: skyblue;
    }
    .checked{
        background-color: greenyellow;
    }
</style>
<table>
    <tr>
        <td></td>
        <td>姓名</td>
        <td>班级</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>李易峰</td>
        <td>软件1805</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>张杰</td>
        <td>软件1808</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>赵丽颖</td>
        <td>软件1807</td>
        <td>26</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>刘亦菲</td>
        <td>软件1809</td>
        <td>21</td>
    </tr>
</table>
<script type="text/javascript">
    $(function(){
        $("tr:odd").addClass("odd");
        $("tr:even").addClass("even");
        $(":checkbox").on("click",function(){
            $(this).parent().parent().toggleClass("checked");
        });
    });
</script>
</body>
</html>