1. Konfigurieren Sie zuerst einen Tabellenrahmen auf der Seite
<tr> <td> Hinzufügen von Parametern: </td> <td> <input type = "button" value = "select" onclick = "openAPPPARAMSPAGE ();"/> </td> <td> Parameterliste: </td> <td> </tol> id = "table" name = "paramslist"/"/> </ttd> </tl> </table". cellpacing="1" cellpadding="0" style=""> <tr> <td valign="top" align="center"> Parameter name: </td> <td valign="top" align="center"> Parameter encoding: </td> <td valign="top" align="center"> Parameter value: </td> <td id="pos_1"> Operation</td> </tr> <tbody id = "sortList"> </tbody> </table> </tr> <tr> <td align = "center" colspan = "4"> <Eingabe type = "value =" save "onclick =" setParamslist ();
2. Verwandte JS -Funktionen
Funktion setParamSlist () {var tab = document.getElementById ("tab"); // Tabellenreihen var rows = tab.rows.length; // Tabellenspalten var cells = tab.rows.Item (0) .cells.length; // alert ("Zeilen"+Zeilen+"Spalten"+Zellen); var rowdata = ""; für (var i = 1; i <Zeilen; i ++) {var cellsData = new Array (); für (var j = 0; j <cells-1; j ++) {cellsData.push (tab.rows [i] .cells [j] .InNerText); } rowdata = rowdata + "|" + CellsData; } document.getElementById ("paramslist"). value = rowdata; } // Öffnen Sie die relevante neue Anwendungsparameter -Schnittstellenfunktion OpenAPPPARAMSPAGE () {var param = new Object (); // Dieser Parameter muss übergeben werden. Param.win = Fenster; param.id = 100; param.name = "test"; param.birthday = new Date (); var result = window.showmodaldialog ("Addparamsitem", "Dialogwidth: 500px; DialogHeight: 600px; Dialogleft: 200px; dialogTop = 200px"); // var temp = document.getElementById ("Paramslist"). Wert; //document.getElementById("ParamSlist").Value = Temp + Ergebnis; AddSort (Ergebnis); } // Fügen Sie die Funktion des Anwendungsparameters hinzu addSort (data) {var name = data; if (name == "" || name == undefiniert) {return; } console.log (Daten); var params = data.split (","); var paramname = params [0]; var paramcode = params [1]; var paramvalue = params [2]; var row = document.createelement ("tr"); Row.SetatTribute ("ID", ParamCode); var cell = document.createelement ("td"); cell.AppendChild (document.CreateTextNode (ParamName)); Row.AppendChild (Zelle); cell = document.createelement ("td"); cell.AppendChild (document.CreateTextNode (paramcode)); Row.AppendChild (Zelle); cell = document.createelement ("td"); cell.AppendChild (document.CreateTextNode (paramvalue)); Row.AppendChild (Zelle); var deletebutton = document.createelement ("Eingabe"); DeleteButton.SetAttribute ("Typ", "Schaltfläche"); DeleteButton.SetAttribute ("Wert", "delete"); DeleteButton.onclick = function () {DeleteSort (paramcode); }; cell = document.createelement ("td"); Cell.AppendChild (Deletebutton); Row.AppendChild (Zelle); document.getElementById ("sortList"). appendChild (row); } // Löschen Sie die Funktion der Anwendungsparameterfunktion Funktion DeleteSort (id) {if (id! = Null) {var rowTodelete = document.getElementById (id); var sortList = document.getElementById ("sortList"); sortList.removechild (RowTodelete); }}Modifikationsfunktion für angehängte Tabellen
// Informationen zur Aktualisierungsschnittstelle von Aktualisierung der Schnittstelle updatesort (id) {if (id! = Null) {var row = document.getElementById (id); // alert ("row is" + row.cells [0] .innerhtml); var id = row.cells [0] .innerhtml; var paramname = row.cells [1] .innerhtml; var paramcode = row.cells [2] .innerhtml; var paramvalue = row.cells [3] .innerhtml; var param = new Object (); // Dieser Parameter muss übergeben werden. Param.win = Fenster; param.id = 100; param.name = "test"; param.birthday = new Date (); var result = window.showModaldialog (BaseURL + "app/updateParamsitem? id =" + id + "¶mname =" + paramname + "¶mcode =" + paramcode + "¶mvalue =" + paramvalue, "dialogWidth: 500px; var arr = result.split (","); row.cells [0] .innerhtml = arr [0]; row.cells [1] .innerhtml = arr [1]; row.cells [2] .innerhtml = arr [2]; row.cells [3] .innerhtml = arr [3]; }}3. Popieren Sie die Box -Seite, fügen Sie die Parameter hinzu oder ändern Sie die relevanten Daten zurück.
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> add app </title> <#include "/views/heads/heads <div></div> <form > <table cellpacing="1" cellpadding="2"> <tr> <td>Parameter name:</td> <td><input type="text" maxlength="20" required="true" id="paramName" name="paramName"/></td> </tr> <tr> <td>Parameter encoding:</td> <td><input type = "text" maxLength = "20" benötigt = "true" id = "paramcode" name = "paramcode" fordert = "true"/> </td> </tr> <tr> <td> Parameterwert ". </tr> <tr> <td align = "center" colspan = "4"> <Eingabe type = "subGing" value = "speichern" onclick = "returnResult ();"/> <input type = "button" value = "return" onclick = "closeWindow (); type = "text/javaScript"> // Das Fenster direkt schließen function condwindow () {window.close (); } // den Wert abrufen, Rückgabefunktion nach der Assembly returnResult () {if (! $ ('Form'). Valid ()) return; var paramname = document.getElementById ("paramname"); var paramcode = document.getElementById ("paramcode"); var paramvalue = document.getElementById ("paramvalue"); // alert ("Wert ist" + paramname.value + "," + paramcode.value + "," + paramvalue.value); var result = paramname.value + "," + paramcode.value + "," + paramvalue.Value; Fenster.ReturnValue = Ergebnis; Fenster.CLOSE (); } </script>Das obige ist die vollständige Beschreibung der Additions-, Modifikations- und Löschfunktionen (empfohlen) von JS -Implementierungsdynamischen Tabellen, die Ihnen vorgelegt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!