table数据表格添加checkbox进行数据进行两个表格左右移动。
<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进行数据进行两个表格左右移动。的更多相关文章
- 将表格添加到Word文档中 ,包括表格样式设置
创建 Table 对象并设置其属性 在您将表格插入文档之前,必须创建 Table 对象并设置其属性. 要设置表格的属性,请创建TableProperties对象并为其提供值. TablePropert ...
- DataTable添加checkbox实现表格数据全选,单选(点选)
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...
- table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行
table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...
- ligerui_实际项目_003:form中添加数据,表格(grid)里面显示,最后将表格(grid)里的数据提交到servlet
实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...
- 用JSON数据向已定义列的表格添加数据行
其实添加方式和在MVC中动态读取JSON数据创建表格一样,只不过一个是完整表格添加,一个是从表格中间添加.不详细说明了. <div> <table class="table ...
- element+vue点击新增表格内在已有数据添加一行带输入框内容
在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- JqGrid查询数据为空时给表格添加提示信息
在JqGrid的loadComplete事件中添加下面的代码就可以实现上图的效果 loadComplete: function () { var rowNum = $("#purchaser ...
随机推荐
- iis 重新注册 .net 方法
dhl:IIS注册ASP.NET 1.1.2.0.4.0_在win7下如果先安装vs2010 后安装iis7的话,必须注册iis才可以用.~~~!!鄙视微软 IIS中ASP.NET的版本号此时可选 ...
- ios-自定义alertView提示框
先上图,弹框的背景色,按钮背景色,提示的消息的字体颜色都可以改变 利用单例实现丰富的自定义接口 // // PBAlertController.h // PBAlertDemo // // Creat ...
- 使用MapReduce实现一些经典的案例
在工作中,很多时候都是用hive或pig来自动化执行mr统计,但是我们不能忘记原始的mr.本文记录了一些通过mr来完成的经典的案例,有倒排索引.数据去重等,需要掌握. 一.使用mapreduce实现倒 ...
- 记一次奇怪IE动态加载js的乱码
1. 问题背景 某个老产品需要支持IE8,前端部分组件采用scrat开发体系进行开发的,当页面中内嵌的iframe的页面再加载组件js的时候,某些情况下会出现组件的js乱码,导致组件的js不能运行.而 ...
- 一般处理程序返回json
一般处理程序: public void ProcessRequest(HttpContext context) { string action = con ...
- csuoj 1505: 酷酷的单词
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1505 1505: 酷酷的单词 时间限制: 1 Sec 内存限制: 128 MB 提交: 340 ...
- 夺命雷公狗-----React---2--组建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- RobotFrameWork http/https oauth接口测试 (二)
在RobotFrameWork http/https oauth接口测试 (一)中,大致介绍了相关的概念,终于可以步入正题了~~~ 先介绍下项目背景: 公司的项目采用的授权模式是第三种resource ...
- bitcask
Bitcask模型是一种日志型kv模型.所谓日志型,是指它不直接支持随机写入,而是像日志一样支持追加操作.Bitcask模型将随机写入转化为顺序写入. 任意时刻,系统中只有一个数据文件支持写入,称为a ...
- JS控制checkbox全选、取消全选、删除功能的代码贴出来。。
function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0; ...