Jquery 表格操作,记录分页情况下,每一页中被用户勾选的信息
如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”。但是有个问题:如果勾选了一条信息之后,点【下一页】,那么上一页 勾选的条目被刷新掉了。
问题:如果用户需要在第1页,第二页,第三页各选几条或多条 然后统一提交处理,该怎么办?
如何在第二页,知道第一页所选的条目? 如何在返回第一页的时候,把刚才勾选过的条目 标记为选中的状态?

思路:--->在页面放一个DIV
------> 为checkbox加一个事件,当该条记录被选中时,获取这条记录,把它存到div中
--------->从第二页返回第一页时,从DIV中检查,将DIV中的记录与列表中的记录匹配,如果列表中的某条信息在DIV中,则将列表中的该条checkbox设为checked=true。
第一步:将 勾选的条目放在 DIV中,效果如下图

//记录或者删除勾选的资源。
//参数: check 为当前点击的checkbox,tableId为保存勾选条目的表格id
function toRecordCheck(check,tableId,recordDiv) { //用于记录已经选择的条目的 表格id.
//var tableId="recordTable";
//当前选中的行
var tds = $(check.parentNode.parentNode);
//根据td来查找 ,当前行的数据
var contents = tds.find("td");
//获得资源编号 需要根据资源编号所在的列来获取值
var sourceNum=contents[1].innerHTML;
//如果是【取消选中】
if(!check.checked){
//alert("删除资源编号为:"+sourceNum+"的条目");
var r=$("#"+tableId+" td").each(function(){
if($(this).text()==sourceNum){
var vh=$(this).parent().remove();
}
});
} else {
//如果是【选中】,在记录的table里边动态追加一行
var contentText = "<tr id="+sourceNum+">";
for ( var i = 0, j = contents.size(); i < j; i++) {
if (i != 0){
contentText += "<td>" + contents[i].innerHTML+"</td>";
}
}
contentText+="</tr>";
$("#"+tableId+"").append(contentText);
}
}
第二步:返回【上一页】时,恢复 上一次已经 勾选过的内容
在这里,以【资源编号】为查找条件,先获得DIV中所记录的资源编号,然后根据编号在 当前页面的 列表中匹配,匹配上的,就把该条记录的checkbox设为checked=true;
代码如下:
//恢复记录,将之前勾选过的条目选中
//参数:recordTableId为保存勾选条目的表格Id,listTableId为列表table的id.
function regain(recordTableId,listTableId){
$("#"+recordTableId+" tr").each(function(){
var ids=$(this).attr("id"); //获得之前选中的资源编号
$("#"+listTableId+" td").each(function(){//遍历列表所在的table,
if($(this).text()==ids){//将其中的资源编号与取得的资源编号匹配
var vh=$(this).parent().find(":checkbox").attr("checked", true);//匹配成功 则选中当前行的 checkbox
}
});
});
}
效果如下:

Jquery 表格操作,记录分页情况下,每一页中被用户勾选的信息的更多相关文章
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- ajax json 表格排序,分页,自己定义每页数量
ajax json 表格排序.分页,自己定义每页数量 点击表头能够排序.依照升序或者降序,另外支持多列排序 设置每页数量 演示 XML/HTML Code <table id='examp ...
- [VS] - "包含了重复的“Content”项。.NET SDK 默认情况下包括你项目中的“Content”项。
copy to :http://www.cnblogs.com/jinzesudawei/p/7376916.html VS 2017 升级至 VS 2017 v15.3 后,.Net Core 1 ...
- 什么情况下才要重写Objective-C中的description方法
特别注意: 千万不要在description方法中同时使用%@和self,同时使用了%@和self,代表要调用self的description方法,因此最终会导致程序陷入死循环,循环调用descrip ...
- 存在网路的情况下重命名SDE中数据图层错误(The orphan junction feature class cannot be renamed)
运行环境为ArcGIS9.3,VS2008. 问题描述:数据通过SDE存储在Oracle10g数据库中,数据集中存在几何网络,在存在网络的情况下通过程序对其中的数据图层进行重命名,弹出"Th ...
- 怎样在不对控件类型进行硬编码的情况下在 C#vs 中动态添加控件
文章ID: 815780 最近更新: 2004-1-12 这篇文章中的信息适用于: Microsoft Visual C# .NET 2003 标准版 Microsoft Visual C# .NET ...
- JQuery表格操作的常用技巧总结
JQuery对表格进行操作的常用技巧. 1.表格奇数行和偶数行分别添加样式 复制代码代码如下: $(function(){ $('tr:odd').addClass("odd") ...
- jQuery表格操作
$("#tableid tr:gt(0)").each(function(i){ $(this).children("td").each(function(j) ...
- php程序无法记录log情况下可尝试下面方法记录log
error_reporting(E_ERROR | E_PARSE); function shutdownCallback(){ $arrError = error_get_last(); // ...
随机推荐
- 详解C#委托,事件与回调函数
.Net编程中最经常用的元素,事件必然是其中之一.无论在ASP.NET还是WINFrom开发中,窗体加载(Load),绘制(Paint),初始化(Init)等等.“protected void Pag ...
- 【T-SQL系列】常用函数—聚合函数
聚合函数平均值AVG.标准偏差STDEV.方差VAR.最大值MAX.最小值MIN.合计SUM.次数COUNT.极差值MAX-MIN.变异系数STDEV/AVG*100 什么是统计统计 就是通过样本特性 ...
- Scrum Meeting---Ten(2015-11-5)
今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 分类页设计 4h 商品详单设计 4h 胡亚坤 首页设计 2h 滚动广告栏设计 2h 刘猛 服务器测试 ...
- 期权交易基本原理——买进看跌期权(Long Put),卖出看跌期权(Short Put)
期权交易基本原理--买进看跌期权(Long Put),卖出看跌期权(Short Put) 来源:中电投先融期货-青岛 浏览:13508次2014-07-25 14:25:55 3 第三节 买进看跌期权 ...
- Win7_提高性能
1. 设置成经典主题:桌面->右键->个性化->经典主题 2. 计算机->右键->属性->高级系统设置 ==> 系统属性->高级->性能-> ...
- [转载] Linux下高并发socket最大连接数所受的各种限制
原文: http://mp.weixin.qq.com/s?__biz=MzAwNjMxNjQzNA==&mid=207772333&idx=1&sn=cfc8aadb422f ...
- golang type 和断言 interface{}转换
摘要 类型转换在程序设计中都是不可避免的问题.当然有一些语言将这个过程给模糊了,大多数时候开发者并不需要去关 注这方面的问题.但是golang中的类型匹配是很严格的,不同的类型之间通常需要手动转换,编 ...
- android 自定义进度条颜色
android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对Android自定义进度条的学习过程! 这个没法了只能看源码了,还好下载了源码, sources\b ...
- Fatal error compiling: 无效的目标发行版: 1.8 -> [Help 1] (zhuan)
http://blog.csdn.net/z18137017273/article/details/53033613 ***************************************** ...
- 闲谈--心态 (zhuan)
http://blog.csdn.net/marksinoberg/article/details/53261034 ***************************************** ...