Example of adding, saving, and deleting table data using jquery

 
For such pages, we often do not submit forms to process the data, because it is very complicated to traverse and process the large amount of data in the background; it is better to save the data in json as an object on the front-end page, and then directly convert the json into the desired object in the background, so that we can directly process the object!

Add button
Copy codeThe Code is as follows:
<Input name = "button" type = "button" value = "add" onClick = "addRowForPswdBasicFillTemplate ('pswd _ basic_fill_template ')">

The table id is pswd_basic_fill_template.
Add Method
Copy codeThe Code is as follows:
Function addRowForPswdBasicFillTemplate (tid ){
Var applyAreaOptionStr = $ ('# applyAreaOptionStr'). val (); // here some initialization of 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>" example .html (""));
Tr. append ($ ("<td> </td>" ).html ("<input type = 'text' name = 'index _ name' id = 'index _ name'/>" ));
Tr. append ($ ("<td> </td>" example .html (""));
Tr. append ($ ("<td> </td>" ).html ("<select name = 'apply _ are' id = 'apply _ are'>" + applyAreaOptionStr + "</ select> "));
Tr. append ($ ("<td> </td>" example .html ("<select name = 'index _ species 'id = 'index _ species'>" + $ ("# indexSpeciesHtml "). val () + "</select> "));
Tr. append ($ ("<td> </td>" ).html ("<textarea maxlength = '000000' 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>" Login .html ("<input type = 'ddd' id = 'orgid' name = 'orgid'/>
<Select name = 'assessorg 'id = 'assessorg'> "+ $ (" # assessOrgHtml "). val () +" </select> "));
Tr. appendTo ($ ("#" + tid ));
SetRowNumber_1 (tid); // Save the number. This parameter is used for the move-up and move-down operations.
}

Save button
Copy codeThe Code is as follows:
<Input name = "button" type = "button" value = "save" onClick = "savePswdBasicFillTemplate ('pswd _ basic_fill_template ')">

Save Method
Copy codeThe Code is as follows:
Function savePswdBasicFillTemplate (tid ){
Did = tid;
Var result = getPswdBasicFillTemplate (); // encapsulate data operations. Please take a closer look.
If (result ){
/*
If (pswd_basic_fill_template.length <1 ){
ShowInfo ("add Basic Data Standards ");
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 ("Save the basic information first! ");
} Else {
// DelAllTr ("pswd_basic_fill_template"); // delete a row
ShowInfo ("saved successfully! ")
If (did! = "Fjsjbz "){
ChangeTaskType (tid );
}
}
});
}
}
// Basic filling Template
Var pswd_basic_fill_template = {};
// The ID of the table to be deleted
Var did = "pswd_basic_fill_template ";
// Obtain the 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 = 'bj BJ ']"). 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 ("indicator name cannot be blank ");
Result = false;
Return false;
}
If (indexName. length <1 ){
ShowInfo ("indicator code cannot be blank ");
Result = false;
Return false;
}
Var postIndexId = $ ('# postindex'). val ();
Var postIndexName = $ ('# postindex'). find ("option: selected"). text ();
Var applyAreaId = $ (tr). find ("select [name = 'apply _ are']"). val ();
Var applyAreaName = $ (tr). find ("select [name = 'apply _ region']"). 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 operations on the front-end are complete. Let's take a look at the operations on the back-end.
Struts configuration file
<Method name = "save" uri = "/secbasicFillTemplate/save">
<Result name = "success" type = "redirect"> @ list </result>
<Result name = "failed"> secassessment/basicFillTemplate/basicFillTemplateNew </result>
</Method>
Background operations
Public void save (){
String obj = request (). getParameter ("tempLateList ");
List <SecBasicFillTemplate> result = JSonUtil. paserJsonArray (SecBasicFillTemplate. class, obj );
// Convert json into an object
}
Next let's take a look at the delete operation
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 you want to delete the record? ");
If (result ){
Var id = selObj. parent (). parent ();
Var idValue = id. find ("input [name = 'idbj ']"). 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 ();
}
}
}
}
// Obtain the selected row
Function getSelRowJnSpacial (tid ){
Var selObj = eval ("$ (\" # "+ tid +" input [@ type = radio] [checked] \ ")");
If(selObj.html ()! = Null ){
Return selObj;
} Else {
ShowInfo ("select the row to be operated ");
Return null;
}
}
Struts configuration file
<Method name = "delete" uri = "/secbasicFillTemplate/delete">
<Result name = "success" type = "redirect"> @ list </result>
</Method>
Background Method
Public void delete (String ids ){
// Method
}
Move up and move 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 ')">
// Upstream migration
Function moveBefore (tid ){
Did = tid;
Var selObj = $ ("input: radio [checked]");
If (selObj = null ){
ShowInof ("select the row to be moved ");
} 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 the row down
Function moveAfter (tid ){
Did = tid;
Var selObj = $ ("input: radio [checked]");
If (selObj = null ){
ShowInof ("select the row to be moved ");
} 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 ("the last row has been reached and cannot be moved down ");
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 number of 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 = 'bj BJ ']"). 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)" pai.html (fValue );
$ (Tr). find ("td: nth-child (5)" pai.html ($ ("# selectHtml"). val ());
// Var assessOrgHtml = "<input type = 'den den 'name = 'orgid' id = 'orgid'> </input>" + $ ("# assessOrgHtml "). val ();
// $ (Tr). find ("td: last-child" ).html (assessOrgHtml );
}
}
})
}