您的位置：首页 > Web前端 > JQuery

jQuery表格插件（隔行换色、划过变色、全选）

2012-12-04 20:53 399 查看

项目地址：https://github.com/xucongli1989/XTableList

下载地址：https://github.com/xucongli1989/XTableList/releases

//by:xcl @2012.8  qq:80213876
; (function ($) {
$.extend({
XTableList: function (options) {
options = $.extend({}, funs.Defaults, options);
funs.Init(options);
$(options.tableClass).each(function () {
var $trs = null;
if ($(this).children("tbody").length > 0) {//浏览器会自动加tbody标签
$trs = options.trNoHoverClass == "" ? $(this).children().children() : $(this).children().children().not(options.trNoHoverClass);
} else {
$trs = options.trNoHoverClass == "" ? $(this).children() : $(this).children().not(options.trNoHoverClass);
}
//滑过行颜色
if (options.trHoverColor != "") {
$trs.hover(function () {
$(this).addClass("XTableList_trHover");
}, function () {
$(this).removeClass("XTableList_trHover");
});
}
//单击行颜色
if (options.trClickColor != "") {
$trs.click(function () {
$trs.removeClass("XTableList_trClick");
$(this).addClass("XTableList_trClick");
});
}
//奇偶行颜色
if (options.trEvenColor != "") {
$trs.each(function (i) {
if (i % 2 == 0) {
$(this).addClass("XTableList_trEven");
}
});
}
if (options.trOddColor != "") {
$trs.each(function (i) {
if (i % 2 == 1) {
$(this).addClass("XTableList_trOdd");
}
});
}
/******表格样式相关结束****/

/******全选相关开始*****/
//单击全选时
$(options.checkAllClass).click(function () {
var $ckAll = $(this).closest(options.tableClass).find(options.checkAllClass);
var $ckItem = $(this).closest(options.tableClass).find(options.checkItemClass);
if (this.checked) {
$ckItem.prop({ "checked": true });
} else {
$ckItem.prop({ "checked": false });
}
funs.GetCheckBoxIDs($ckAll, $ckItem);
});
//单击列表中的checkbox时
$(options.checkItemClass).click(function () {
var $ckAll = $(this).closest(options.tableClass).find(options.checkAllClass);
var $ckItem = $(this).closest(options.tableClass).find(options.checkItemClass);
var flag = 1;
$ckItem.each(function () {
if (!this.checked) {
flag = 0;
return false;
}
});
if (flag == 1) {
$ckAll.prop({ "checked": true });
} else {
$ckAll.prop({ "checked": false });
}
funs.GetCheckBoxIDs($ckAll, $ckItem);
});
/******全选相关结束*****/

});
}
});
var funs = {
Defaults: {
tableClass: ".XTableList",//table的class
trHoverColor: "#e0ecff",//行滑过时的颜色
trClickColor: "",//单击行后的颜色
trNoHoverClass: ".XTableNoHover",//无需设置颜色的行class
trEvenColor: "#f9f9f9",//偶数行的颜色0开始
trOddColor: "",//奇数行的颜色
checkAllClass: ".XTableCheckAll",//全选按钮class
checkItemClass: ".XTableCheckItem",//选择框的class
checkedTrColor: "#fffec9"//选中行的颜色
},
Init: function (options) {
//样式
$("head").append("<style type='text/css'>.XTableList_trHover{background:" + options.trHoverColor + "!important;} " +
".XTableList_trClick{background:" + options.trClickColor + "!important;} " +
".XTableList_trEven{background:" + options.trEvenColor + ";} " +
".XTableList_trOdd{background:" + options.trOddColor + ";}" +
".XTableList_trChecked{background:" + options.checkedTrColor + "!important;}" +
"</style>");
//当子项都为选中时，此时选中全选项
$(options.tableClass).each(function () {
var $ckAll = $(this).closest(options.tableClass).find(options.checkAllClass);
var $ckItem = $(this).closest(options.tableClass).find(options.checkItemClass);
var isAllChecked = 1;
$ckItem.each(function () {
if (!this.checked) {
isAllChecked = 0; return false;
}
});
if (isAllChecked == 1) {
$ckAll.prop({ "checked": true });
}else{
$ckAll.prop({ "checked": false });
}

funs.GetCheckBoxIDs($ckAll, $ckItem);
});

},
//将列表中的checkbox的value的数组形式存到全选的checkbox的value中
GetCheckBoxIDs: function (ckAll, ckItem) {
var v = [];
ckItem.each(function () {
if (this.checked) {
$(this).closest("tr").addClass("XTableList_trChecked");
v.push(this.value);
} else {
$(this).closest("tr").removeClass("XTableList_trChecked");
}
});
ckAll.val(v.toString());
}
}
})(jQuery);

使用说明

$.XTableList({options:optionsValue});

使用示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Js/jquery-1.11.1.min.js"></script>
<script src="Js/XTableList.js"></script>
</head>
<body>

<table class="XTableList" style="width:100%;">
<tr>
<td>
<input type="checkbox" value="" class="XTableCheckAll" />全选
</td>
<td>ID号</td>
<td>姓名</td>
<td>年龄</td>
<td>备注</td>
</tr>
<tr>
<td>
<input type="checkbox" value="1" class="XTableCheckItem" />
</td>
<td>ID</td>
<td>Name</td>
<td>Age</td>
<td>Remark</td>
</tr>
<tr>
<td>
<input type="checkbox" value="2" class="XTableCheckItem" />
</td>
<td>ID</td>
<td>Name</td>
<td>Age</td>
<td>Remark</td>
</tr>
<tr>
<td>
<input type="checkbox" value="3" class="XTableCheckItem" />
</td>
<td>ID</td>
<td>Name</td>
<td>Age</td>
<td>Remark</td>
</tr>
<tr>
<td>
<input type="checkbox" value="4" class="XTableCheckItem" />
</td>
<td>ID</td>
<td>Name</td>
<td>Age</td>
<td>Remark</td>
</tr>
<tr>
<td>
<input type="checkbox" value="5" class="XTableCheckItem" />
</td>
<td>ID</td>
<td>Name</td>
<td>Age</td>
<td>Remark</td>
</tr>
<tr>
<td>
<input type="checkbox" value="6" class="XTableCheckItem" />
</td>
<td>ID</td>
<td>Name</td>
<td>Age</td>
<td>Remark</td>
</tr>
</table>

<script type="text/javascript">
$(function () {
$.XTableList();
});
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航