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 css float属性的特殊写法
Nov 13 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
老生常谈ES6中的类
Jul 31 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 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错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python 的 with 语句详解
2014/06/13 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
python操作gitlab API过程解析
2019/12/27 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
PHP经典面试题
2016/09/03 面试题
Weblogic的布署方式
2013/08/23 面试题
新郎婚宴答谢词
2014/01/19 职场文书
暑期社会实践方案
2014/02/05 职场文书
岗位职责风险防控
2014/02/18 职场文书
领导失职检讨书
2014/02/24 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书