当前位置: 编程技术>WEB前端
jquery对table中各数据的增加、保存、删除操作示例
来源: 互联网 发布时间:2014-08-25
本文导语: 像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的;比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象...
像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的;比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这样我们的直接可以处理对象了!
添加按钮
代码如下:
table id是pswd_basic_fill_template
添加方法
代码如下:
function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $('#applyAreaOptionStr').val(); //这里是对select框的一些初始化
did = tid;
var tr = $("").attr("bgcolor","#FFFFFF");
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($("").html(""+applyAreaOptionStr+""));
tr.append($("").html(""+$("#indexSpeciesHtml").val()+""));
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($("").html("
"+$("#assessOrgHtml").val()+""));
tr.appendTo($("#"+tid));
setRowNumber_1(tid); //保存编号,上移下移操作会用到 ,先不关注
}
保存按钮
代码如下:
保存方法
代码如下:
function savePswdBasicFillTemplate(tid){
did = tid;
var result = getPswdBasicFillTemplate(); //封装数据操作,请仔细看
if(result){
/*
if(pswd_basic_fill_template.length= 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 = "";
if(tid=="zdppbzlb"){
fValue = "";
}
$(tr).find("td:nth-child(4)").html(fValue);
$(tr).find("td:nth-child(5)").html($("#selectHtml").val());
//var assessOrgHtml = ""+$("#assessOrgHtml").val();
//$(tr).find("td:last-child").html(assessOrgHtml);
}
}
})
}