table数据表格添加checkbox进行数据进行两个表格左右移动。
2015-07-21 16:30
393 查看
<table class="table table-hover table-striped table-condensed newDateList"> <thead> <tr> <th style="width: 50px;"> <input type="checkbox" /></th> <th>摄像机编号</th> <th>摄像机名称</th> </tr> </thead> <tbody id="tbListNew"> <%--<tr> <td> <input type="checkbox" /></td> <td>Trident</td> <td>Internet Explorer 4.0</td> </tr>--%> </tbody> </table> <div class="hide hiddenDIVLeft"></div>
var check = "input[type='checkbox']"; //checkbox全选 function allChecked(tableClass) { $(tableClass).find(check).change(function () { //判断thead处的复选框是否选中 var thead = $(this).parent().parent().parent(); if (thead.prop("nodeName") == "THEAD") { if (thead.find(check).is(':checked')) { $(tableClass).find(check).prop("checked", true); } else { $(tableClass).find(check).prop("checked", false); } } }) } //部分选取移动 function checkboxTurn(tableClass,hiddenDIv) { $(tableClass).each(function () { if ($(this).find(check).is(':checked')) { $(hiddenDIv).append("<tr>" + $(this).html() + "</tr>"); $(this).remove(); } }) } //全部选取移动 function checkboxAllTurn(leftTable,rightTable) { $(rightTable).find("tbody").append($(".dateList").find("tbody").html()); $(leftTable).find("tbody").empty(); $(leftTable).find("thead").find(check).prop("checked", false); } //table数据从左向右移动 allChecked(".dateList"); $(".dateToRightBtn").click(function () { //全选 if ($(".dateList thead").find(check).is(':checked')) { checkboxAllTurn(".dateList", ".newDateList"); } else { checkboxTurn(".dateList tbody tr", ".hiddenDIV"); $(".newDateList tbody").append($(".hiddenDIV").html()); $(".hiddenDIV").empty(); } }) //table数据从右向左移动 allChecked(".newDateList"); $(".dateToLeftBtn").click(function () { //全选 if ($(".newDateList thead").find(check).is(':checked')) { checkboxAllTurn(".newDateList", ".dateList"); } //部分选取 else { checkboxTurn(".newDateList tbody tr", ".hiddenDIVLeft") $(".dateList tbody").append($(".hiddenDIVLeft").html()); $(".hiddenDIVLeft").empty(); } })
相关文章推荐
- JS移动客户端--触屏滑动事件
- HDU 1276 士兵队列训练问题(队列)
- struts2、spring整合
- flash 调用启动一个.exe文件并向其传递参数的方法
- python中字符串的使用
- hdoj-1312-Red and Black
- linux 系统定时器的一些用法
- freeradius 启动报错Refusing to start with libssl version OpenSSL 1.0.1
- Android 网络通信框架Volley简介(Google IO 2013)
- Install Shield Limited Edition 下载、注册、安装 VS打包安装包
- poj2492解题报告
- HDOJ Air Raid 1151【最小路径覆盖】
- 给Ubuntu更换成163的源(sources.list)Unable to locate package
- 这是一篇测试文章
- 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
- java集合知识点概括
- OSI七层模型详解
- 关于JSON的一些数据格式转换
- IPTABLES进阶
- 一个之前没注意的小知识点1