像这种页面，我们往往不是通过提交表单来处理这些数据，因为如果在后台去遍历处理这些大量的数据是非常繁琐的；比较好的做法是在前台页面中将数据以对象形式保存在json中，然后在后台直接将json转换成我们需要的对象，这">
Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispiele für JQuery-Operationen zum Hinzufügen, Speichern und Löschen von Daten in einer table_jquery

WBOY
Freigeben： 2016-05-16 16:48:15
Original
1347 Leute haben es durchsucht

Beispiele für JQuery-Operationen zum Hinzufügen, Speichern und Löschen von Daten in einer table_jquery
Bei Seiten wie dieser verarbeiten wir diese Daten oft nicht durch das Absenden von Formularen, da es sehr umständlich ist, diese großen Datenmengen im Hintergrund zu verarbeiten Speichern Sie auf der Vordergrundseite die Daten in JSON in Form von Objekten und konvertieren Sie JSON dann im Hintergrund direkt in die von uns benötigten Objekte, damit wir die Objekte direkt verarbeiten können!

Schaltfläche hinzufügen

Code kopierenDer Code lautet wie folgt:

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

Tabellen-ID ist pswd_basic_fill_template
Methode hinzufügen
Code kopieren Der Code lautet wie folgt:

function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $('#applyAreaOptionStr' ).val(); //Hier sind einige Initialisierungen für das Auswahlfeld
did = tid;
var tr = $(""). attr("bgcolor", "#FFFFFF");
tr.append($("").html(""));
tr.append($("").html(""));
tr. append($("< ;td>").html("")); append($("< ;td>").html(""));
tr.append($("").html("< ;select name='apply_Area ' id='apply_Area'>" applyAreaOptionStr ""));
tr.append($("").html( "")); td>"));
tr.append($ ("").html("" ));
tr.append($("").html("") );
tr.append($("").html("
"));
tr.appendTo ($("#" tid));
setRowNumber_1(tid); //Speichern Sie die Nummer, die für die Auf- und Abwärtsbewegungen verwendet wird
}


Speichern-Button


Code kopieren Der Code lautet wie folgt:


Speichermethode


Code kopierenCode wie folgt:

function savePswdBasicFillTemplate(tid){
did = tid;
var result = getPswdBasicFillTemplate(); //Gekapselte Datenoperation, bitte sorgfältig lesen
if(result){
/ *
if(pswd_basic_fill_template<1){
showInfo("Bitte Basisdatenstandard hinzufügen");
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 Speichern Sie zuerst die grundlegenden Informationen! ");
}else{
//delAllTr("pswd_basic_fill_template"); //Zeile löschen
showInfo("Speichern erfolgreich!")
if(did!="fjsjbz"){
changeTaskType(tid);
}
}
});
}
}
//基础填报模版
var pswd_basic_fill_template = {};//要删除的tableId
var did = "pswd_basic_fill_template";
//获取模板值>function getPsw dBasicFillTemplate(){
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 beurteilenOrg = $(tr).find("select[name='assessOrg']").val();
var beurteilenOrgName = $(tr).find("select[name=' beurteilenOrg']").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;
false zurückgeben;
}
if(indexName.length<1){
showInfo("指标代号不能为空");
result = false;
false zurückgeben;
}
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);
})
Rückgabeergebnis;
}
前台的操作就完成了,下面看一看后台的操作
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 = bestätigen("确定将记录删除？");
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 ();
}
}
}
}
// Holen Sie sich die ausgewählte Zeile
function getSelRowJnSpacial(tid){
var selObj=eval("$("# " tid " input[@type=radio][checked]")");
if(selObj.html()!=null){
return selObj>}else{
showInfo( „Bitte wählen Sie die Zeile aus, die ausgeführt werden soll“);
return null;
}
Struts-Konfigurationsdatei
@list
Hintergrundmethode
public void delete(String ids) {
//Methode
}
Funktion „Nach oben und unten bewegen“
Schaltfläche


//Zeile nach oben verschieben
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("Es ist oben angekommen und kann nicht nach oben verschoben werden");
return;
var preObj=selObj.parent().prev(); selRow= selObj.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"); tbody= eval(expression);
$.each(tbody,function(i,tr){
if(i>=0){
var number=i 1;
$(tr) .find ("td:nth-child(2)").text(number);
}
})
}
//In der Zeile nach unten bewegen
function moveAfter(tid) {
did =tid;
var selObj= $("input:radio[checked]");
if(selObj==null){
showInof("Bitte wählen Sie die zu verschiebende Zeile aus" );
}else{
var r1 = selObj.parent()[0].rowIndex;
var a1 = eval("$("#" did " tbody tr")" ).size( );
if(parseInt(selObj.parent().parent()[0].rowIndex)-1 >= a1){
showInfo("Wir haben die letzte Zeile erreicht und können nicht weiter nach unten bewegen") ;
return;
}
var nextObj=selObj.parent().parent().next();
var selRow=selObj.parent().parent( ).clone();
nextObj.after(selRow);
selObj.parent().parent().remove();
setRowNumber_1(tid); 🎜>//Set rowNumber Die Sequenznummer
function setRowNumber_1(tid){
var fNew = 1;
var expression="$("#" tid " tbody tr""; 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
$(tr).find("td:nth-child(2)").text(number); (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 beurteilenOrgHtml = "< /input>" $("#assessOrgHtml").val();
//$(tr).find("td:last-child").html(assessOrgHtml);
}
}
})
}


Verwandte Etiketten：
jquery
Quelle：php.cn
Vorheriger Artikel：jquery ztree implementiert ein Dropdown-Baumfeld mithilfe von json data_jquery Nächster Artikel：Einige Vorschläge zur JQuery-Leistungsoptimierung_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
So rufen Sie Werte nicht ausgewählter Zeilen in einer HTML-Datentabelle mithilfe von JQuery ab Ich versuche, den Wert aller Zeilen zu ermitteln, in denen nicht auf die Schaltfläche gekl...
Aus 2024-04-05 09:26:49
0
1
1418
Benötigen Sie ein JQuery-Skript, um ausgewählte Optionen basierend auf der aktuellen Auswahl des Endbenutzers aus einem Auswahlfeld zu verschieben Ich habe eine HTML-Seite, auf der der Endbenutzer unsere Artikel über ein Auswahlfeldeleme...
Aus 2024-04-04 18:40:04
0
1
3528
Ich habe über Lesezeichen ein Element in reinem CSS erstellt. Es ist erstellt, aber nicht sichtbar Mein Code lautet wie folgt: g=document.createElement('div');g.setAttribute("id",...
Aus 2024-04-04 17:27:27
0
1
417
Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...
Aus 2024-04-04 12:53:48
0
1
303
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage