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隔行变色效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容