jquery对table中各数据的增加、保存、删除操作示例


Posted in Javascript onMay 14, 2014

jquery对table中各数据的增加、保存、删除操作示例 
像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的;比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这样我们的直接可以处理对象了!

添加按钮

<input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTemplate('pswd_basic_fill_template')">

table id是pswd_basic_fill_template
添加方法
function addRowForPswdBasicFillTemplate(tid){ 
var applyAreaOptionStr = $('#applyAreaOptionStr').val(); //这里是对select框的一些初始化 
did = tid; 
var tr = $("<tr></tr>").attr("bgcolor","#FFFFFF"); 
tr.append($("<td></td>").html("<input type='radio' name='radio' value='checkbox'></td>")); 
tr.append($("<td></td>").html("")); 
tr.append($("<td></td>").html("<input type='text' name='index_name' id='index_name' />")); 
tr.append($("<td></td>").html("")); 
tr.append($("<td></td>").html("<select name='apply_Area' id='apply_Area'>"+applyAreaOptionStr+"</select>")); 
tr.append($("<td></td>").html("<select name='index_species' id='index_species'>"+$("#indexSpeciesHtml").val()+"</select>")); 
tr.append($("<td></td>").html("<textarea maxlength='500' rows='3' cols='20' name='formula' id='formula'/>")); 
tr.append($("<td></td>").html("<input type='text' name='cap' id='cap' size='5'/>")); 
tr.append($("<td></td>").html("<input type='text' name='base_value' id='base_value' size='5'/>")); 
tr.append($("<td></td>").html("<input type='hidden' id='orgid' name='orgid' /> 
<select name='assessOrg' id='assessOrg'>"+$("#assessOrgHtml").val()+"</select>")); 
tr.appendTo($("#"+tid)); 
setRowNumber_1(tid); //保存编号,上移下移操作会用到 ,先不关注 
}

保存按钮
<input name="button" type="button" value="保存" onClick="savePswdBasicFillTemplate('pswd_basic_fill_template')">

保存方法
function savePswdBasicFillTemplate(tid){ 
did = tid; 
var result = getPswdBasicFillTemplate(); //封装数据操作,请仔细看 
if(result){ 
/* 
if(pswd_basic_fill_template.length<1){ 
showInfo("请添加基础数据标准"); 
return; 
} 
*/ 
for(var i=0;i<pswd_basic_fill_template.length;i++){ 
pswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i]); 
} 
$.post("<c:url value='/secbasicFillTemplate/save'/>",{"tempLateList":"["+pswd_basic_fill_template+"]"}, 
function(data) { 
if("false"==data){ 
showInfo("请先保存基础信息!"); 
}else{ 
//delAllTr("pswd_basic_fill_template"); //删除行 
showInfo("保存成功!") 
if(did!="fjsjbz"){ 
changeTaskType(tid); 
} 
} 
}); 
} 
} 
//基础填报模版 
var pswd_basic_fill_template = {}; 
//要删除的tableId 
var did = "pswd_basic_fill_template"; 
//获取模板值 
function getPswdBasicFillTemplate(){ 
pswd_basic_fill_template=[]; 
var trs=eval("$(\"#"+did + " tbody tr\")"); 
var result=true; 
$.each(trs,function(i,tr){ 
var order = $(tr).find("td:nth-child(2)").text(); 
var indexCode = $(tr).find("input[name='index_code']").val(); 
var indexName = $(tr).find("input[name='index_name']").val(); 
var indexType = $(tr).find("select[name='index_type']").find("option:selected").text(); 
var indexSpecies = $(tr).find("select[name='index_species']").find("option:selected").text(); 
var formula = $(tr).find("textarea[name='formula']").val(); 
var cap = $(tr).find("input[name='cap']").val(); 
var baseValue = $(tr).find("input[name='base_value']").val(); 
var assessOrg = $(tr).find("select[name='assessOrg']").val(); 
var assessOrgName = $(tr).find("select[name='assessOrg']").find("option:selected").text(); 
var idObj = $(tr).find("input[name='idObj']").val(); 
var indexValue = $(tr).find("input[name='index_value']").val(); 
var templateType = "2"; 
if(did=="zdppbzlb"){ 
templateType = "3"; 
}else if(did=="fjsjbz"){ 
templateType = "4"; 
assessOrg = $(tr).find("select[name='countyOrg']").val(); 
} 
var taskType = $("#task_type").val(); 
if(indexCode.length<1){ 
showInfo("指标名称不能为空"); 
result = false; 
return false; 
} 
if(indexName.length<1){ 
showInfo("指标代号不能为空"); 
result = false; 
return false; 
} 
var postIndexId = $('#postIndex').val(); 
var postIndexName = $('#postIndex').find("option:selected").text(); 
var applyAreaId = $(tr).find("select[name='apply_Area']").val(); 
var applyAreaName = $(tr).find("select[name='apply_Area']").find("option:selected").text(); 
var pswd_basic_fill_templateBean={ 
"postIndexId":postIndexId,"postIndexName":postIndexName,"applyAreaId":applyAreaId,"applyAreaName":applyAreaName, 
"indexCode":indexCode,"templateType":templateType,"indexValue":indexValue, 
"indexName":indexName,"taskType":taskType,"order":order,"id":idObj,"baseValue":baseValue, 
"indexSpecies":indexSpecies,"formula":formula,"cap":cap,"orgName":assessOrgName,"orgid":assessOrg 
} 
pswd_basic_fill_template.push(pswd_basic_fill_templateBean); 
}) 
return result; 
} 
前台的操作就完成了,下面看一看后台的操作 
struts配置文件 
<method name="save" uri="/secbasicFillTemplate/save"> 
<result name="success" type="redirect">@list</result> 
<result name="failed">secassessment/basicFillTemplate/basicFillTemplateNew</result> 
</method> 
后台操作 
public void save() { 
String obj = request().getParameter("tempLateList"); 
List<SecBasicFillTemplate> result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj); 
//将json转化为对象 
} 
下面看看删除操作 
删除按钮 <input name="button" type="button" value="删除" onClick="delRowForSpacialById('pswd_basic_fill_template')" > 
//删除一行的数据 
function delRowForSpacialById(tid){ 
var selObj=getSelRowJnSpacial(tid); 
if(selObj){ 
var result = confirm("确定将记录删除?"); 
if(result){ 
var id = selObj.parent().parent(); 
var idValue = id.find("input[name='idObj']").val(); 
if(idValue!=null && idValue.length>0){ 
$.post("<c:url value='/secbasicFillTemplate/delete'/>",{"ids":idValue},function(){ 
selObj.parent().parent().remove(); 
}) 
}else{ 
selObj.parent().parent().remove(); 
} 
} 
} 
} 
// 获取选中的行 
function getSelRowJnSpacial(tid){ 
var selObj=eval("$(\"#"+tid+" input[@type=radio][checked]\")"); 
if(selObj.html()!=null){ 
return selObj; 
}else{ 
showInfo("请选择要操作的行"); 
return null; 
} 
} 
struts 配置文件 
<method name="delete" uri="/secbasicFillTemplate/delete" > 
<result name="success" type="redirect">@list</result> 
</method> 
后台方法 
public void delete(String ids) { 
//方法 
} 
上移下移功能 
按钮 
<input name="button" type="button" value="上移" onClick="moveBefore('pswd_basic_fill_template')"> 
<input name="button" type="button" value="下移" onClick="moveAfter('pswd_basic_fill_template')"> 
//上移行 
function moveBefore(tid){ 
did =tid; 
var selObj= $("input:radio[checked]"); 
if(selObj==null){ 
showInof("请选择要移动的行"); 
}else{ 
var rowIndex = selObj.parent().parent()[0].rowIndex; 
if(parseInt(rowIndex)<=2){ 
showInfo("已经到顶,不能再上移了"); 
return; 
} 
var preObj=selObj.parent().parent().prev(); 
var selRow=selObj.parent().parent().clone(); 
preObj.before(selRow); 
selObj.parent().parent().remove(); 
setRowNumber_1_1(did); 
} 
} 
function setRowNumber_1_1(tid){ 
var fNew = 1; 
var expression="$(\"#"+tid+" tbody tr\")"; 
var tbody=eval(expression); 
$.each(tbody,function(i,tr){ 
if(i>=0){ 
var number=i+1; 
$(tr).find("td:nth-child(2)").text(number); 
} 
}) 
} 
//下移行 
function moveAfter(tid){ 
did =tid; 
var selObj= $("input:radio[checked]"); 
if(selObj==null){ 
showInof("请选择要移动的行"); 
}else{ 
var r1 = selObj.parent().parent()[0].rowIndex; 
var a1 = eval("$(\"#"+did+" tbody tr\")").size(); 
if(parseInt(selObj.parent().parent()[0].rowIndex)-1 >= a1){ 
showInfo("已经到最后一行,不能再下移了"); 
return; 
} 
var nextObj=selObj.parent().parent().next(); 
var selRow=selObj.parent().parent().clone(); 
nextObj.after(selRow); 
selObj.parent().parent().remove(); 
setRowNumber_1_1(tid); 
} 
} 
//设置rowNumber的序号 
function setRowNumber_1(tid){ 
var fNew = 1; 
var expression="$(\"#"+tid+" tbody tr\")"; 
var tbody=eval(expression); 
$.each(tbody,function(i,tr){ 
if(i>=0){ 
var idObj = $(tr).find("input[name='idObj']").val(); 
var f = $(tr).find("td:nth-child(4)").find("input[name='index_code']").val(); 
if(f!=null){ 
var f1 = f.substring(1); 
if(f1>=0){ 
fNew = parseInt(f1)+1; 
} 
} 
var number=i+1; 
$(tr).find("td:nth-child(2)").text(number); 
if(idObj==null && f==null){ 
var fValue = "<input id='index_code' name='index_code' value='F"+fNew+"' readonly='true' size='5'>"; 
if(tid=="zdppbzlb"){ 
fValue = "<input id='index_code' name='index_code' value='K"+fNew+"' readonly='true' size='5'>"; 
} 
$(tr).find("td:nth-child(4)").html(fValue); 
$(tr).find("td:nth-child(5)").html($("#selectHtml").val()); 
//var assessOrgHtml = "<input type='hidden' name='orgid' id='orgid'></input>"+$("#assessOrgHtml").val(); 
//$(tr).find("td:last-child").html(assessOrgHtml); 
} 
} 
}) 
}
Javascript 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
小程序实现留言板
Nov 02 Javascript
js实现中文实时时钟
Jan 15 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
调整小数的格式保留小数点后两位
May 14 #Javascript
原生js的弹出层且其内的窗口居中
May 14 #Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 #Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 #Javascript
JavaScript函数获取事件源的小例子
May 14 #Javascript
javascript单引号和双引号的区别和处理
May 14 #Javascript
document.write的几点使用心得
May 14 #Javascript
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
CI框架中zip类应用示例
2014/06/17 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python微信公众号开发简单流程实现
2020/03/09 Python
python3代码中实现加法重载的实例
2020/12/03 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
学子宴答谢词
2014/01/25 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014年司法所工作总结
2014/11/22 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
干部理论学习心得体会
2016/01/21 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
Redis入门教程详解
2021/08/30 Redis