JS implementa las funciones de adición, modificación y eliminación de tablas dinámicas (recomendadas)

1. Primero configure un marco de tabla en la página

 <tr> <td> Se agregaron parámetros: </td> <td> <input type = "button" value = "select" onClick = "OpenAppParamSpage ();"/> </td> <td> parámetros List: </td> <td> <input type = "hidden" id = "paramslist" name = "paramslist"/> </td> <tr> <tr> <tr> <tr> <tr> CellPacing = "1" CellPadding = "0" style = ""> <tr> <td valign = "top" align = "centro"> nombre del parámetro: </td> <td valign = "top" align = "center"> encoding de parámetro: </td> <td valign = "top" align = "center"> valor del parámetro: </td> <td id = "td" Poss <td <1/td <t/td <t/td <t/td "Pos_1" Pos_1 "TD <T/td" Pos_1 " </tr> <tbody id = "sortList"> </tbody> </bable> </tr> <tr> <tr> <td align = "center" colspan = "4"> <input type = "subt" value = "save" onClick = "setParamSlist ();"/> <input type = "button" value = "return"/> </td> </tr>

2. Funciones JS relacionadas

 function setParamSlist () {var tab = document.getElementById ("tab"); // Tabla filas var filas = tab.rows.length; // columnas de tabla var celdas = tab.rows.Item (0) .Cells.length; // alerta ("filas"+filas+"columnas"+celdas); var rowData = ""; for (var i = 1; i <shows; i ++) {var cellsData = new array (); for (var j = 0; j <cells-1; j ++) {cellsdata.push (tab.rows [i] .cells [j] .innertext); } RowData = RowData + "|" + Data de células; } document.getElementById ("ParamSlist"). Value = RowData; } // Abra la función de interfaz de parámetro de nueva aplicación relevante OpenAppParamSpage () {var param = new Object (); // Este parámetro debe pasarse. param.win = ventana; 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"). valor; //document.getElementBy (("paramslist").value = temp + resultado; addSort (resultado); } // Agregar la función del parámetro de aplicación addSort (data) {var name = data; if (name == "" || name == Undefined) {return; } console.log (datos); var params = data.split (","); var paramName = params [0]; var paramcode = params [1]; var paramValue = params [2]; var fila = document.createElement ("tr"); Row.SetAttribute ("id", paramcode); var celular = document.createElement ("td"); celular.appendChild (document.createTextNode (paramName)); fila.appendChild (celda); celular = document.createElement ("TD"); celular.appendChild (document.createTextNode (paramcode)); fila.appendChild (celda); celular = document.createElement ("TD"); celular.appendChild (document.createTextNode (paramValue)); fila.appendChild (celda); var deletButton = document.createElement ("entrada"); deleteButton.SetAttribute ("Tipo", "Botón"); deleteButton.SetAttribute ("Valor", "Eliminar"); deleteButton.OnClick = function () {DeleteSort (ParamCode); }; celular = document.createElement ("TD"); Cell.AppendChild (DeleteButton); fila.appendChild (celda); document.getElementById ("SortList"). AppendChild (fila); } // Eliminar la función de la función de parámetro de aplicación DeleteSort (id) {if (id! = NULL) {var rowtodelete = document.getElementById (id); var sortList = document.getElementById ("SortList"); sortList.removechild (RowTodelete); }}

Función de modificación para tablas adjuntas

 // Pensar información sobre la función de interfaz de actualización UpdateSort (id) {if (id! = Null) {var row = document.getElementById (id); // alerta ("La fila es" + 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 (); // Este parámetro debe pasarse. param.win = ventana; 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; dialogHeight: 600px; dialogleft: 200px; dialogtOp = 200px"); 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. Explique la página del cuadro, agregue o modifique los parámetros, y vuelva a escribir los datos relevantes.

 < xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> agrega app </title> <#include "/views/head.html"/> </head> <bode> <viñoso> <viñoso> <viñoso> <vi- <div> </div> <form> <table cellPacing = "1" cellPadding = "2"> <tr> <td> nombre del parámetro: </td> <td> <input type = "text" maxlength = "20" requerido = "true" id = "paramName" name = "paramName de paramName type = "text" maxLength = "20" requerido = "true" id = "paramcode" name = "paramcode" requerido = "true"/> </td> </tr> <tr> <tr> <td> valor de parameter: </td> <td> <input type = "text" maxlength = "20" requerir = "true" id = "paramvalue" name = "paramvalue requerido" requerido "requerido" requerido "verdadero" </tr> <tr> <td align = "Center" colspan = "4"> <input type = "Subt" value = "save" onClick = "returnResult ();"/> <input type = "button" value = "return" onClick type = "text/javaScript"> // cerrar la ventana directamente functionwindow () {window.close (); } // Obtener la función de valor, retorno después del ensamblaje returnResult () {if (! $ ('Form'). Válido ()) return; var paramName = document.getElementById ("paramName"); var paramcode = document.getElementById ("paramcode"); var paramValue = document.getElementById ("ParamValue"); // alerta ("valor es" + paramname.value + "," + paramcode.value + "," + paramValue.Value); VAR result = ParamName.Value + "," + ParamCode.Value + "," + ParamValue.Value; Window.ReturnValue = resultado; window.close (); } </script>

Lo anterior es la descripción completa de las funciones de adición, modificación y deleción (recomendadas) de las tablas dinámicas de implementación JS introducidas a usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!