- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>jQuery实现点击复选框即高亮显示选中行 全选、反选</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="res/jquery-1.7.1.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);
- });
- //表头中的checkbox (全选 反选)
- $("thead>tr th:first :checkbox:first ").click(function () {
- //判断当前是否选中
- var hasSelected = $(this).attr("checked");
- //如果选中,则移出selected类,否则就加上selected类
- $('tbody>tr')[!hasSelected ? "removeClass" : "addClass"](options.selected);
- if (hasSelected)
- $('tbody>tr :checkbox').attr("checked",true);
- else
- $('tbody>tr :checkbox').attr("checked",false);
- });
- // 如果单选框默认情况下是选择的,则高色.
- $('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="table2">
- <thead><tr><th><input type="checkbox"/><input type="checkbox" onselect="javascript:alert('kdkdkd');"/></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>
jQuery实现点击复选框即高亮显示选中行 全选、反选
最新推荐文章于 2022-07-06 11:14:36 发布