jQuery选中复选框，表格配景变色，隔行换色

发布时间：2018-08-13 16:17:29 所属栏目：编程来源：站长网

导读：jQuery 选中复选框，表格配景变色结果，也有的伴侣称之为高亮表现选中行结果，其它该例中还实现了隔行换色，代码中的注释也是相等多的，这样利便各人去领略和行使它。为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增

　　jQuery选中复选框，表格配景变色结果，也有的伴侣称之为“高亮表现选中行结果”，其它该例中还实现了隔行换色，代码中的注释也是相等多的，这样利便各人去领略和行使它。

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>高亮表现选中行</title> <style type="text/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;} </style> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></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); //假如选中，则移出selected类，不然就加上selected类 $(this)[hasSelected?"removeClass":"addClass"](options.selected) //查找内部的checkbox,配置对应的属性。 .find(':checkbox').attr('checked',!hasSelected); }); // 假如单选框默认环境下是选择的，则高色. $('tbody>tr:has(:checked)',this).addClass(options.selected); return this; //返回this，使要领可链。 } }); })(jQuery); //插件应用 $(function(){ $("#table2") .alterBgColor() //应用插件 .find("th").css("color","red");//可以链式操纵 }) </script> </head> <body> <table id="table1"> <thead><tr><th> </th><th>姓名</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>Rain</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" checked="checked" /></td> <td>MAXMAN</td> <td>女</td> <td>浙江杭州</td> </tr> </tbody> </table> <br /><br /> <table id="table2"> <thead><tr><th> </th><th>姓名</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>Rain</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" checked="checked" /></td> <td>MAXMAN</td> <td>女</td> <td>浙江杭州</td> </tr> </tbody> </table> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys