Examples of jquery operations for adding, saving, and deleting data in a table_jquery

For pages like this, we often do not process these data by submitting forms, because it is very cumbersome to traverse and process these large amounts of data in the background; a better approach is to process this in the foreground page Save the data in json in the form of objects, and then directly convert json into the objects we need in the background, so that we can directly process the objects!

Add button

Copy code The code is as follows:

table id is pswd_basic_fill_template
Add method

Copy code The code is as follows:

function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $('#applyAreaOptionStr' ).val(); //Here are some initializations for the select box
did = tid;
var tr = $("").attr("bgcolor", "#FFFFFF");
tr.append($("").html(""));
tr.append($("").html(""));
tr.append($("< ;td>").html(""));
tr.append($("< ;td>").html(""));
tr.append($("").html("" applyAreaOptionStr ""));
tr.append($("").html("" $("#indexSpeciesHtml").val() ""));
tr.append($(""));
tr.append($ ("").html(""));
tr.append($("").html("") );
tr.append($("").html("
" $("#assessOrgHtml").val() ""));
tr.appendTo($("#" tid));
setRowNumber_1(tid); //Save the number, which will be used for the up and down operations. Don’t pay attention to it yet
}

Save button

Copy code The code is as follows:

Save method

Copy code Code As follows:

function savePswdBasicFillTemplate(tid){
did = tid;
var result = getPswdBasicFillTemplate(); //Encapsulated data operation, please read carefully
if(result){
/ *
if(pswd_basic_fill_template.length<1){
showInfo("Please add basic data standard");
return;
}
*/
for(var i=0 ;ipswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i]);
}
$.post("",{"tempLateList":"[" pswd_basic_fill_template "]"},
function(data) {
if("false"==data){
showInfo("Please Save the basic information first! ");
}else{
//delAllTr("pswd_basic_fill_template"); //Delete the line
showInfo("Save successfully!")
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配置文件

@list
secassessment/basicFillTemplate/basicFillTemplateNew

后台操作
public void save() {
String obj = request().getParameter("tempLateList");
List result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj);
//将json转化为对象
}
下面看看删除操作
删除按钮
//删除一行的数据
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("",{"ids" :idValue},function(){
selObj.parent().parent().remove();
})
}else{
selObj.parent().parent().remove ();
}
}
}
}
// Get the selected row
function getSelRowJnSpacial(tid){
var selObj=eval("$("# " tid " input[@type=radio][checked]")");
if(selObj.html()!=null){
return selObj;
}else{
showInfo( "Please select the line to operate");
return null;
}
}
struts configuration file
@list

Background method
public void delete(String ids) {
//Method
}
Move up and move down function
Button


//Move up row
function moveBefore(tid){
did =tid;
var selObj= $("input:radio[checked]");
if(selObj==null){
showInof("Please select Moved row");
}else{
var rowIndex = selObj.parent().parent()[0].rowIndex;
if(parseInt(rowIndex)<=2){
showInfo("It has reached the top and cannot be moved up");
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);
}
})
}
//Move down the line
function moveAfter(tid){
did =tid;
var selObj= $("input:radio[checked]");
if(selObj==null){
showInof("Please select the row to move");
}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("We have reached the last row and cannot move down any further") ;
return;
}
var nextObj=selObj.parent().parent().next();
var selRow=selObj.parent().parent().clone();
nextObj.after(selRow);
selObj.parent().parent().remove();
setRowNumber_1_1(tid);
}
}
//Set rowNumber The sequence number
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 = "< /input>" $("#assessOrgHtml").val();
//$(tr).find("td:last-child").html(assessOrgHtml);
}
}
})
}