这是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;}
代码的结果为：
