这是HTML代码和jQuery的触发代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="tableChangeColor_byself.css"/>
<script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
<script src="tableChangeColor_byself.js"></script>
<script type="text/javascript">
$(function(){
$("table").alterBgColor().find("th").css("color","red");
});
</script>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th> </th>
<th>姓名1</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>张三</td>
<td>男</td>
<td>新疆哈密</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>江苏南京</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked=‘checked‘ /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>冯七</td>
<td>男</td>
<td>浙江嘉兴</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>马八</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
这是jQuery插件的代码：
;(function($) {
$.fn.extend({
//"隔行换色": function(options) {
"alterBgColor": function(options) {
//设置默认值
options = $.extend({
odd: "odd",
/* 偶数行样式*/
even: "even",
/* 奇数行样式*/
selected: "selected" /* 选中行样式*/
}, options);
//$("选择器",上下文); //如果不传第二个参数 默认上下文是 document 从当前文档中 寻找
//this 在当前对象下 寻找 table
$("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);
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(‘:checkbox‘).prop(‘checked‘, !hasSelected); //2.1.4 需改成prop方法
});
// 如果单选框默认情况下是选择的，则高色.
$(‘tbody>tr:has(:checked)‘, this).addClass(options.selected);
return this; //返回this，使方法可链。
}
});
})(jQuery);
这是其中的CSS样式代码：
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
代码的结果为：
原文地址：https://www.cnblogs.com/justlive-tears/p/9404520.html
时间： 2024-11-13 23:51:17