jQuery隔行变色高亮显示

最新推荐文章于 2022-02-15 20:44:24 发布

来干了这碗代码

最新推荐文章于 2022-02-15 20:44:24 发布

阅读量423

点赞数 1

分类专栏： jQuery 文章标签： jquery html css

本文链接：https://blog.csdn.net/nsnydnz/article/details/119986903

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

该博客演示了如何利用jQuery实现HTML表格的隔行变色和鼠标悬停时的高亮效果。通过选择偶数行和奇数行，分别设置不同的背景色，实现了视觉上的区分。同时，通过添加鼠标悬停事件，使得表格行在鼠标经过时变为黄色，离开时恢复原色，提升了用户体验。

摘要由CSDN通过智能技术生成

jQuery实现表格的隔行变色高亮显示

文章目录

jQuery实现表格的隔行变色高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行变色高亮显示</title></title>  
        <style type="text/css">
            table{
                text-align: center;
                font-weight: bold;
            }
            tr{
                height: 32px;
            }
        </style> 
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    </head>
    <body>
        <table border="1" cellpadding="0" cellspacing="0" width="400">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>21</td>
            </tr>
            <tr>
                <td>5</td>
                <td>钱七</td>
                <td>22</td>
            </tr>
        </table>
    </body>
    <script type="text/javascript">
    // 设置表头的颜色 表头不需要高亮显示
    $('table tr:first').css({'background':'#694d9f'});
    $('table tr:even').not('table tr:first').css({'background':'#888'});
    $('table tr:odd').css({'background':'#ccc'});
    // 表头是不需要高亮显示的
    $('table tr').not('table tr:first').hover(
        function(){
            color=$(this).css('backgroundColor');  // 获取之前的背景颜色
            $(this).css({'background':'yellow'});
        },
        function(){
            $(this).css({'background':color});
        }
    );
    </script>
    </html>

来干了这碗代码

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery隔行变色高亮显示

jQuery实现表格的隔行变色高亮显示文章目录jQuery实现表格的隔行变色高亮显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录