jQuery隔行变色效果代码实例
分享一段代码实例，它实现了table表格行隔行变色效果。
并且当选中当前行的时候也能够实现变色。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style media="screen">
thead th {
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
padding: 2px 3px;
}
td {
width: 80px;
height: 20px;
line-height: 20px;
text-align: center;
padding: 2px 3px;
}
.odd {
background: #FFFFEE;
}
.even {
background: #FFF38F;
}
.selected {
background: #FF6500;
color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function($) {
$.fn.extend({
"alterBgcolor": function(options) {
options = $.extend({
odd: "odd",
even: "even",
selected: "selected"
}, options);
$("tbody>tr:odd", this).addClass(options.odd);
$("tbody>tr:even", this).addClass(options.even);
$("tbody>tr", this).click(function() {
var hasSelected = $(this).hasClass(options.selected);
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
.find(":checkbox").attr("checked", !hasSelected);
});
$('tbody>tr:has(":checked")', this).addClass(options.selected);
return this;
}
});
})(jQuery);
$(function() {
$("#table_02").alterBgcolor()
.find("th")
.css("color", "red");
});
</script>
</head>
<body>
<table id="table_01">
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>前端教程网</td>
<td>4</td>
<td>青岛市南区</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>网易</td>
<td>10</td>
<td>北京</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>腾讯</td>
<td>12</td>
<td>深圳</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>百度</td>
<td>15</td>
<td>背景</td>
</tr>
</tbody>
</table>
<table id="table_02">
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>前端教程网</td>
<td>4</td>
<td>青岛市南区</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>网易</td>
<td>10</td>
<td>北京</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>腾讯</td>
<td>12</td>
<td>深圳</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>百度</td>
<td>15</td>
<td>背景</td>
</tr>
</tbody>
</table>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.(function($) {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$.fn.extend({}）,为jquery实例对象添加属性或者方法。
（3）."alterBgcolor": function(options) {},此函数实现了隔行变色效果,参数是一个配置对象。
（4）.options = $.extend({ odd: "odd",
even: "even",
selected: "selected"
}, options)，对options进行配置，extend的第一个参数是默认配置。
（5）.$("tbody>tr: odd", this).addClass(options.odd)，为当前jquery对象内的奇数tr行添加指定的样式类。
（6）.$("tbody>tr:even", this).addClass(options.even)，和上面是同样的道理，只是为偶数行添加指定的样式类。
（7）.$("tbody>tr", this).click(function() {}）,为当前jquery对象内的tr行注册click事件处理函数。
（8）.var hasSelected = $(this).hasClass(options.selected),判断当前行是否具有指定的样式类，返回一个布尔值。
（9）.$(this)[hasSelected ? "removeClass" : "addClass"](options.selected).find(":checkbox").attr("checked", !hasSelected);
上面的代码分段比较好理解，$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)根据hasSelected是true或者false，来调用jquery对象的removeClass()方法或者addClass()方法，传递的参数是options.selected，也就是说如果没有指定的样式类，那么就添加对应的样式类，如果有，则删除对应的样式类；find(":checkbox").attr("checked", !hasSelected)如果复选框已经选中，则取消选中，否则选中。
（10）.$('tbody>tr:has(":checked")', this).addClass(options.selected)，如果行具有选中的复选框，那么就添加对应的样式类。
（11）.$(function() {})，当文档结构完全加载完毕再去执行函数中的代码。
（12）.$("#table_02").alterBgcolor().find("th").css("color", "red")，对第二个表格进行表格隔行变色设置，并且将标题设置为红色。
jQuery隔行变色效果代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery隔行变色效果代码实例就介绍到这了。
jQuery隔行变色效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。