jQuery实现table隔行换色和鼠标经过变色的两种方法-优快云博客

本文链接：https://blog.youkuaiyun.com/zgphacker2010/article/details/84879911

本文介绍了如何使用jQuery实现表格行的隔行换色及鼠标经过时的变色效果，包括一行代码快速设置背景颜色，以及通过事件绑定实现交互式颜色变化。

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

参考代码：

一、隔行换色

$("tr:odd").css("background-color","#eeeeee");
$("tr:even").css("background-color","#ffffff");

或者一行搞定：

$("table tr:nth-child(odd)").css("background-color","#eeeeee");

:nth-child 匹配其父元素下的第N个子或奇偶元素

二、鼠标经过变色

$("tr").live({
mouseover:function(){
$(this).css("background-color","#eeeeee");
},
mouseout:function(){
$(this).css("background-color","#ffffff");
}
})

或者

$("tr").bind("mouseover",function(){
$(this).css("background-color","#eeeeee");
})
$("tr").bind("mouseout",function(){
$(this).css("background-color","#ffffff");
})

其他参考资料：

<script type="text/javascript">
        $(document).ready(function () {
            $("#right tr td").mousedown(function () {//鼠标按住时remove mouseenter时 td的样式。
                $(this).removeClass("over"); $(this).addClass("click");
            })
            $("#right tr td").mouseup(function () {//鼠标弹起时，清除td的样式
                $(this).removeClass("click");
            })
            $("#right tr").mouseenter(function () {//鼠标进入tr添加样式.over
                $(this).addClass("over");
            })
            $("#right tr").mouseout(function () {  //鼠标离开tr，清除样式.over
                $(this).removeClass("over");
            })
            $("#right tr").click(function () {  //click tr时，添加样式.click
                $(this).addClass("click"); $(this).siblings().removeClass("click");
            })
        });
    </script>

项目中使用方式：

样式：

<style type="text/css">

.even_tr{ background-color: #FFFFFF;}

.odd_tr{ background-color: #d5effc;}

</style>

1、鼠标经过tr行变色。

$(function(){

//treeTable1为table的id

$("#treeTable1 tr").mouseover(function (){$(this).addClass("odd_tr");});

$("#treeTable1 tr").mouseout(function (){$(this).removeClass("odd_tr");});

});