jquery和bootstrap获取checkbox选中的多行数据

在项目中,经常遇到,于是整理

引用bootstrap的js和css

代码解释:

$("#dgFlowList").find(":checkbox:checked").each(function(){

							　　var val = $(this).parents("tr").text();

							　　data.push(val);

						});

代码:

 <html>

 <head>

     <title>多选</title>

     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

     <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">

     <script src="js/jquery.min.js"></script>

     <script src="js/app.js"></script>

     <script src="bootstrap/js/bootstrap.js"></script>

     <script type="text/javascript">

         $(document).ready(function () {

                 $("#select_button").on('click',function(){

                 var checkids = [];

                 var data = [];

                 $("input[name='ckb']:checked").each(function(i){

                     checkids[i] = $(this).val();

                 });

                 if(checkids.length<=0){

                     $.notify('请选择请假单',{status: "danger"});

                 }else{

                         console.log(checkids);

                         $("#dgFlowList").find(":checkbox:checked").each(function(){

                         var val = $(this).parents("tr").text();

                         data.push(val);

                     });

                     console.log(data);

                 }

             });

         });

         function deleteCurrentRow(obj){

             var tr=obj.parentNode.parentNode;

             var tbody=tr.parentNode;

             tbody.removeChild(tr);

             //只剩行首时删除表格

             if(tbody.rows.length==0) {

                 tbody.parentNode.removeChild(tbody);

             }

         }

     </script>

 </head>

 <body>

     <table cellspacing="0" rules="all" bordercolor="#CCCCCC" border="1" id="dgFlowList"

     style="border-color:#CCCCCC;border-width:1px;border-style:solid;width:98%;border-collapse:collapse;MARGIN: 5px 0px">

         <tr class="DataGrid_HeaderStyle" nowrap="nowrap" align="Center">

             <th></th><th>流程名称</th><th>表单名称</th><th>操作</th>

         </tr>

         <tr>

             <td><input type="checkbox" name="ckb" value="1"></td>

             <td style="width:35%;">请假单1</td>

             <td style="width:35%;">请假单</td>

             <td align="Center" style="width:20%;">

             <a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" name="ckb" value="2"></td>

             <td style="width:35%;">请假单2</td>

             <td style="width:35%;">请假单</td>

             <td align="Center" style="width:20%;">

             <a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" name="ckb" value="3"></td>

             <td style="width:35%;">请假单3</td>

             <td style="width:35%;">请假单</td>

             <td align="Center" style="width:20%;">

             <a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" name="ckb" value="4"></td>

             <td style="width:35%;">请假单4</td>

             <td style="width:35%;">请假单</td>

             <td align="Center" style="width:20%;">

             <a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>

             </td>

         </tr>

         <tr>

             <td><input type="checkbox" name="ckb" value="5"></td>

             <td style="width:35%;">请假单5</td>

             <td style="width:35%;">请假单</td>

             <td align="Center" style="width:20%;">

             <a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>

             </td>

         </tr>

     </table>

     <div align="center">

         <button type="button" class="btn btn-primary" id="select_button"> 多选</button>

     </div>

 </body>

 </html>

app.js代码,是为notify写的,于功能没有多大的关系

 /**

  * Notify Addon definition as jQuery plugin

  * Adapted version to work with Bootstrap classes

  * More information http://getuikit.com/docs/addons_notify.html

  */

 (function ($, window, document) {

     var containers = {},

         messages = {},

         notify = function (options) {

             if ($.type(options) == 'string') {

                 options = {message: options};

             }

             if (arguments[1]) {

                 options = $.extend(options, $.type(arguments[1]) == 'string' ? {status: arguments[1]} : arguments[1]);

             }

             return (new Message(options)).show();

         },

         closeAll = function (group, instantly) {

             if (group) {

                 for (var id in messages) {

                     if (group === messages[id].group) messages[id].close(instantly);

                 }

             } else {

                 for (var id in messages) {

                     messages[id].close(instantly);

                 }

             }

         };

     var Message = function (options) {

         var $this = this;

         this.options = $.extend({}, Message.defaults, options);

         this.uuid = "ID" + (new Date().getTime()) + "RAND" + (Math.ceil(Math.random() * 100000));

         this.element = $([

             // alert-dismissable enables bs close icon

             '<div class="uk-notify-message alert-dismissable">',

             '<a class="close">&times;</a>',

             '<div>' + this.options.message + '</div>',

             '</div>'

         ].join('')).data("notifyMessage", this);

         // status

         if (this.options.status) {

             this.element.addClass('alert alert-' + this.options.status);

             this.currentstatus = this.options.status;

         }

         this.group = this.options.group;

         messages[this.uuid] = this;

         if (!containers[this.options.pos]) {

             containers[this.options.pos] = $('<div class="uk-notify uk-notify-' + this.options.pos + '"></div>').appendTo('body').on("click", ".uk-notify-message", function () {

                 $(this).data("notifyMessage").close();

             });

         }

     };

     $.extend(Message.prototype, {

         uuid: false,

         element: false,

         timout: false,

         currentstatus: "",

         group: false,

         show: function () {

             if (this.element.is(":visible")) return;

             var $this = this;

             containers[this.options.pos].show().prepend(this.element);

             var marginbottom = parseInt(this.element.css("margin-bottom"), 10);

             this.element.css({

                 "opacity": 0,

                 "margin-top": -1 * this.element.outerHeight(),

                 "margin-bottom": 0

             }).animate({"opacity": 1, "margin-top": 0, "margin-bottom": marginbottom}, function () {

                 if ($this.options.timeout) {

                     var closefn = function () {

                         $this.close();

                     };

                     $this.timeout = setTimeout(closefn, $this.options.timeout);

                     $this.element.hover(

                         function () {

                             clearTimeout($this.timeout);

                         },

                         function () {

                             $this.timeout = setTimeout(closefn, $this.options.timeout);

                         }

                     );

                 }

             });

             return this;

         },

         close: function (instantly) {

             var $this = this,

                 finalize = function () {

                     $this.element.remove();

                     if (!containers[$this.options.pos].children().length) {

                         containers[$this.options.pos].hide();

                     }

                     delete messages[$this.uuid];

                 };

             if (this.timeout) clearTimeout(this.timeout);

             if (instantly) {

                 finalize();

             } else {

                 this.element.animate({

                     "opacity": 0,

                     "margin-top": -1 * this.element.outerHeight(),

                     "margin-bottom": 0

                 }, function () {

                     finalize();

                 });

             }

         },

         content: function (html) {

             var container = this.element.find(">div");

             if (!html) {

                 return container.html();

             }

             container.html(html);

             return this;

         },

         status: function (status) {

             if (!status) {

                 return this.currentstatus;

             }

             this.element.removeClass('alert alert-' + this.currentstatus).addClass('alert alert-' + status);

             this.currentstatus = status;

             return this;

         }

     });

     Message.defaults = {

         message: "",

         status: "normal",

         timeout: 5000,

         group: null,

         pos: 'top-center'

     };

     $["notify"] = notify;

     $["notify"].message = Message;

     $["notify"].closeAll = closeAll;

     return notify;

 }(jQuery, window, document));

jquery和bootstrap获取checkbox选中的多行数据的更多相关文章

jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
[开发笔记]-jQuery获取checkbox选中项等操作及注意事项
今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下来,希望能帮到遇到类似问题的同学们. 1. 获取chec ...
jquery设置和获得checkbox选中问题
1.设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox ...
webform开发经验（一）：Asp.Net获取Checkbox选中的值
webform中获取repeat控件列表下的checkbox选中的值: 码农上代码: public static string getSelectedIDs(Repeater Rpt_) { stri ...
php获取checkbox数组的表单数据
提交表单的时候,对于checkbox多选框,name="field[]",此时php获取的数组为:从0开始的索引数组:如果name="field[n]" 有数字 ...
jQuery之获取checkbox选中的值
<mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!-- ...
jquery 获取checkbox 选中值并拼接字符集
1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){ chk_val ...
js jquery select 操作获取值,选中选项,增加,修改,删除
select示例: <select id="sel"> <option value="1">one</option> < ...

随机推荐

MySQL架构简介
使用masory
动态更新约束的时候老是提示有多余的约束,我使用update_contraits make_contraits 都不能解决,后来使用了remake_contraits才消除了告警. view pro ...
pycharm + git 的集成使用
1. 下载git 和Pycharm并安装 2. 打开Pycharm, 点击 file-->Default Settins-->Version Control-->Git 然后在 P ...
python 读取配置文件总是报错 configparser.NoSectionError: No section:
本文为作者原创,禁止转载,违者必究法律责任!!! python 读取配置文件总是报错 configparser.NoSectionError: No section: 无论是 python2的版本,还 ...
recv函数返回值说明
recv函数 int recv( SOCKET s, char FAR *buf, int len, int flags); 不论是客户还是服务器应用程序都用recv函数从TCP连接的另一端接收数据. ...
Swift Optional
拆包和解包的原因: 其实所谓的 nil 就是 Optional.None, 非 nil 就是Optional.Some, 然后会通过Some(T)包装(wrap)原始值,这也是为什么在使用 Optio ...
Python正则处理多行日志一例(可配置化)
正则表达式基础知识请参阅<正则表达式基础知识>,本文使用正则表达式来匹配多行日志并从中解析出相应的信息. 假设现在有这样的SQL日志: SELECT * FROM open_app WHE ...
Linux基础命令---显示文本grep
grep 按照指定的模式,在文件中搜索匹配的行,将结果显示在标准输出.另外还有两个指令egrep相当于grep –E,fgrep相当于grep -F.如果没有给出文件名,那么从标准输入读取. 此命令的 ...
addEventListener的click和onclick的区别
前两节都和addEventListener的click有关,于是在想它与onclick有什么区别呢,自己调试了一下,网上也有相关资料事件绑定 onclick绑定方式优点: - 简洁 - 处理事件的 ...
mysql5.7密码设置
mysql5.7版本引入了强制更改密码的举措,只能吐槽一句,shit!mysql5.7安装安装完mysql之后,mysql已经随机指定了一个初始化密码,可以在mysql的错误日志中找到初始化密码: c ...

jquery和bootstrap获取checkbox选中的多行数据

jquery和bootstrap获取checkbox选中的多行数据的更多相关文章

随机推荐

热门专题