jQuery表格行鼠标悬停变色

2020-01-14 本文已影响0人 xushiluo

撰写：2020年1月14日

注意：不能保证三五年后，本博文对于新版的浏览器和jQuery仍然有效，请斟酌参考！

一、系统环境

Windows 10 64bit 1903
Chrome 79 64bit
jQuery 3.4.1

二、代码

2.1 创建样板html

使用VS Code创建一个包含表格的html文件：

<!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>鼠标悬停变色</title>
    <style>
        table{
            margin: 10px auto;
            border-collapse: collapse;
        }
        tr td{
            border: 1px solid black;
            margin: 5px;
            padding: 5px;
            height: 30px;
        }
    </style>
</head>
<body>
    <table id="DataGrid1">
        <tbody>
            <tr>
                <td>1</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>2</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>3</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>4</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>5</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

将上述代码保存为悬停变色.html，双击该文件，即可在浏览器中看到如下显示结果：

表格结果

2.2 引入jQuery

可以使用CDN引入jQuery，CDN的网址如下：https://www.bootcdn.cn/jquery/，打开该网址，复制最新的3.4.1到剪贴板，将其加入到html的head标签内。引入jQuery的代码如下：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2.3 hover实现悬停变色

实现表格行悬停变色，可以采用jQuery中的hover事件。hover的语法如下：

$( selector ).hover( handlerIn, handlerOut )

其中selector为选择器，handerIn为鼠标进入时的回调函数，handerOut为鼠标离开时的回调函数。
在悬停变色.html的head标签中新建一个script标签，其中代码如下：

$(document).ready(function(){
    $("table#DataGrid1 tr").hover(function () {
        $(this).css("background-color", "yellow");
    }, function () {
        $(this).css("background-color", "white");
    });
});

上面这部分代码实现了当鼠标进入时，表格行背景色变为黄色，鼠标离开时表格行背景色变为白色。
效果如下：

鼠标悬停表格行变色.gif

2.4 完整代码如下：

<!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>鼠标悬停变色</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        table{
            margin: 10px auto;
            border-collapse: collapse;
        }
        tr td{
            border: 1px solid black;
            margin: 5px;
            padding: 5px;
            height: 30px;
        }
        /* tr:hover{
            background-color: #dafdf3;
        } */
    </style>
    <script>
        $(document).ready(function(){
            $("table#DataGrid1 tr").hover(function () {
                $(this).css("background-color", "yellow");
            }, function () {
                $(this).css("background-color", "white");
            });
        });
    </script>
</head>
<body>
    <table id="DataGrid1">
        <tbody>
            <tr>
                <td>1</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>2</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>3</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>4</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
            <tr>
                <td>5</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
                <td>前端开发中经常使用到table表格</td>
            </tr>
        </tbody>
    </table>
</body>
</html>