孙肖宁

高级隔行变色(jQuery)
描述:通过jQuery控制表格的奇数行和偶数行的颜色不一样,鼠标经过的时候,颜色变成白色,鼠标离开,颜色恢复原来的...
扫描右侧二维码阅读全文
04
2018/05

高级隔行变色(jQuery)

描述:通过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>
Last modification:May 11th, 2018 at 10:53 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment