Jquery on the table of the data to add save delete examples

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405141725346.gif? 2014414172550 ">  
On a page like this, we tend not to process the data by submitting the form, because it's tedious to go through the large amount of data in the background; It is a good idea to store the data as objects in json on the foreground page, and then convert the json directly to the objects we need in the background, so that our objects can be processed directly!

Add a button

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

The table is pswd_basic_fill_template id
Add methods

 
function addRowForPswdBasicFillTemplate(tid){ 
var applyAreaOptionStr = $('#applyAreaOptionStr').val(); //Here are some initializations to the select box
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); //Save the number, move up and down will be used, so let's not worry about that
} 

Save button

 
<input name="button" type="button" value=" save " onClick="savePswdBasicFillTemplate('pswd_basic_fill_template')"> 

Save method

 
function savePswdBasicFillTemplate(tid){ 
did = tid; 
var result = getPswdBasicFillTemplate(); //Encapsulate data operations, please look carefully
if(result){ 
 
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(" Please save the basic information first! "); 
}else{ 
//delAllTr("pswd_basic_fill_template"); // Delete rows  
showInfo(" Save successful! ") 
if(did!="fjsjbz"){ 
changeTaskType(tid); 
} 
} 
}); 
} 
} 
//Basic filling template
var pswd_basic_fill_template = {}; 
//The tableId you want to delete
var did = "pswd_basic_fill_template"; 
//Get template value
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(" The index name cannot be empty "); 
result = false; 
return false; 
} 
if(indexName.length<1){ 
showInfo(" Indicator code cannot be null "); 
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; 
} 
 The operation of the foreground is completed, let's take a look at the operation of the background  
struts The configuration file  
<method name="save" uri="/secbasicFillTemplate/save"> 
<result name="success" type="redirect">@list</result> 
<result name="failed">secassessment/basicFillTemplate/basicFillTemplateNew</result> 
</method> 
 Background operation  
public void save() { 
String obj = request().getParameter("tempLateList"); 
List<SecBasicFillTemplate> result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj); 
//Convert json to an object
} 
 Let's look at the delete operation  
 The delete button  <input name="button" type="button" value=" delete " onClick="delRowForSpacialById('pswd_basic_fill_template')" > 
//Delete a row of data
function delRowForSpacialById(tid){ 
var selObj=getSelRowJnSpacial(tid); 
if(selObj){ 
var result = confirm(" Are you sure to delete the record? "); 
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(); 
} 
} 
} 
} 
//Gets 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 on "); 
return null; 
} 
} 
struts  The configuration file  
<method name="delete" uri="/secbasicFillTemplate/delete" > 
<result name="success" type="redirect">@list</result> 
</method> 
 The background method  
public void delete(String ids) { 
// methods  
} 
 Move up and down  
 button  
<input name="button" type="button" value=" Move up " onClick="moveBefore('pswd_basic_fill_template')"> 
<input name="button" type="button" value=" Move down " onClick="moveAfter('pswd_basic_fill_template')"> 
//In the transitional
function moveBefore(tid){ 
did =tid; 
var selObj= $("input:radio[checked]"); 
if(selObj==null){ 
showInof(" Please select the row to move "); 
}else{ 
var rowIndex = selObj.parent().parent()[0].rowIndex; 
if(parseInt(rowIndex)<=2){ 
showInfo(" Have been to , I can't go up any more "); 
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); 
} 
}) 
} 
//Under the migration
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're on the last row , I can't go any lower "); 
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 the sequence number of the 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); 
} 
} 
}) 
}