<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();
} })

table数据表格添加checkbox进行数据进行两个表格左右移动。的更多相关文章

  1. 将表格添加到Word文档中 ,包括表格样式设置

    创建 Table 对象并设置其属性 在您将表格插入文档之前,必须创建 Table 对象并设置其属性. 要设置表格的属性,请创建TableProperties对象并为其提供值. TablePropert ...

  2. DataTable添加checkbox实现表格数据全选,单选(点选)

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...

  3. table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行

    table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...

  4. ligerui_实际项目_003:form中添加数据,表格(grid)里面显示,最后将表格(grid)里的数据提交到servlet

    实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...

  5. 用JSON数据向已定义列的表格添加数据行

    其实添加方式和在MVC中动态读取JSON数据创建表格一样,只不过一个是完整表格添加,一个是从表格中间添加.不详细说明了. <div> <table class="table ...

  6. element+vue点击新增表格内在已有数据添加一行带输入框内容

    在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...

  7. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  8. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  9. JqGrid查询数据为空时给表格添加提示信息

    在JqGrid的loadComplete事件中添加下面的代码就可以实现上图的效果 loadComplete: function () { var rowNum = $("#purchaser ...

随机推荐

  1. DuiLib学习笔记2——写一个简单的程序

    我们要独立出来自己创建一个项目,在我们自己的项目上加皮肤这才是初衷.我的新建项目名为:duilibTest 在duilib根目录下面有个 Duilib入门文档.doc 我们就按这个教程开始入门 首先新 ...

  2. [Android Tips] 17. Check APK Sign Info

    $ jarsigner -verify -verbose -certs <apk file path> 查看 keystore $ keytool -list -keystore debu ...

  3. ubuntu 常用命令集合版(一)【大侠勿喷,菜鸟欢迎】(转载)

    1:apt-get:(一般是要加sudo) debian系系统的软件包管理程序(其图形化前端就是大名鼎鼎的新立得了),会自动帮你搞定依赖关系最常用参数:update        —-与你的软件源(在 ...

  4. 20145320 《Java程序设计》第6周学习总结

    20145320 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 流(Stream)是对「输入输出」的抽象,注意「输入输出」是相对程序而言的 10.1 Input ...

  5. Maven聚合与继承的实例讲解(一)

    概述 在javaweb高速发展的今天,我们软件设计人员往往会用很多种方式对软件划分模块,目的就是为了能有清晰的设计和低耦合性的,高重用性的软件.Maven有很好的依赖管理系统(Dependency M ...

  6. final关键字用法总结

    在java中,可能使用到final关键字修饰的有数据.方法和类. 一.final 修饰数据 有final修饰的数据是用来告诉编译器一块数据是恒定不变的,有时数据恒定不变是很有用的,比如: 1.一个永不 ...

  7. [原创] Linux下几种文件传输命令 sz rz sftp scp介绍

    Linux下几种文件传输命令 sz rz sftp scp介绍 1.sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具.由于它是基于SSH的,会在传输过程中对用户的密码.数据等 ...

  8. 理解NDCG

    关于NDCG,wiki给点解释很详细,这里我谈谈我的理解. NDCG(Normalized discounted cumulative gain):是用来衡量排序质量的指标. 其中一种计算公式如下: ...

  9. java基本数据类型包装类

    Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...

  10. GWT入门学习之下载安装

    1.准备 安装 jdk: 下载路径:http://download.oracle.com/otn-pub/java/jdk/8u92-b14/jdk-8u92-windows-i586.exe?Aut ...