这是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;}代码的结果为：
08.01《jQuery》——隔行换色jQuery实现
原文地址：https://www.cnblogs.com/justlive-tears/p/9404520.html