jQuery实现HTML表格隔行变色及鼠标悬停变色效果

本文主要是介绍jQuery实现HTML表格隔行变色及鼠标悬停变色效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

以下代码实现效果：1.表格隔行变色。2.鼠标悬停在表格行上时变色。

一：在页面内引入jquery.js。我使用的是jquery-1.6.min.js。

二：加入如下js代码

<script type="text/javascript">//隔行变色$(document).ready(function(){$(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时，执行函数$(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数$(this).removeClass("over");}) //移除该行的class$(".stripe_tb tr:even").addClass("alt"); //给class为stripe_tb的表格的偶数行添加class值为alt});</script>

三：添加如下CSS样式表

/*注意选择器的层叠关系*/
.stripe_tb tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*这个将是鼠标高亮行的背景色

四：给对应表格<table>标签加上class="stripe_tb"属性

这篇关于jQuery实现HTML表格隔行变色及鼠标悬停变色效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---