jquery实现隔行变色

最新推荐文章于 2023-11-14 19:48:16 发布

小宁博客

最新推荐文章于 2023-11-14 19:48:16 发布

阅读量2.4k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/xiaoningboke/article/details/80575882

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原文链接：小宁博客
描述：通过jQuery控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。jQuery的版本为1.8
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级隔行变色</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .form{
            width: 500px;
            margin: 100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #404060;
            width: 500px;
            text-align: center;
        }
        th,td{
            border: 1px solid #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
    </style>
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            var trodd = $(".form tr:odd");
            var treven = $(".form tr:even");
            trodd.css("background","#a3a3a3");
            treven.css("background","#ccc");

            //计数器，记录鼠标经过之前的颜色
            var color = "";
            $(".form tr").mouseenter(function () {
                color = $(this).css("background");
                $(this).css("background","#fff");
            });
            $(".form tr").mouseleave(function () {
                $(this).css("background",color);
            });
        });
    </script>
</head>
<body>
<div class="form">
    <table>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody class="target">
        <tr>
            <td>001</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>002</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>003</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>004</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>005</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>006</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        <tr>
            <td>007</td>
            <td>赵武</td>
            <td>100</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>