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

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

原创最新推荐文章于 2024-01-17 15:50:46 发布 · 5.7k 阅读

5 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

40 篇文章

订阅专栏

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

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");
    });
});