表格中，鼠标放上去的行变色，离开恢复原来颜色

最新推荐文章于 2024-01-17 15:50:46 发布

我心V飞翔

最新推荐文章于 2024-01-17 15:50:46 发布

阅读量5.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/ful1021/article/details/38562925

web前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一段JavaScript代码，该代码实现了一个简单的功能：当鼠标悬停在HTML表格的某一行上时，该行及其包含的所有单元格背景颜色会发生变化；当鼠标移开时，颜色则恢复原状。此功能通过jQuery库实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS代码

/*
表格中，鼠标放上去的行变色
使用  
<tbody id="tdata">
    .........
</tbody>
*/
$(function () {
    var tr = $("#tdata tr");
    tr.mouseover(function () {
        $(this).css("background-color", "#AEF2E5");
        $(this).children("td").css("background-color", "#AEF2E5");
    }).mouseout(function () {
        $(this).css("background-color", "#FFFFFF");
        $(this).children("td").css("background-color", "#FFFFFF");
    });
});