JS реализует функции добавления, модификации и удаления динамических таблиц (рекомендуется)

1. Сначала настройте кадр таблицы на странице

 <tr> <td>Added parameters:</td> <td><input type="button" value="select" onclick="openAppParamsPage();"/></td> <td>Parameter list:</td> <td><input type="hidden" id="paramslist" name="paramslist"/></td> </tr> <tr> <table id="tab" cellPacing = "1" cellPadding = "0" style = ""> <Tr> <td valign = "top" align = "center"> имя параметра: </td> <td valign = "top" align = "center"> Параметр Кодирование: </td> <td valign = "top" align = center "> value: </td> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD идентификатор </tr> <tbody id = "sortlist"> </tbody> </table> </tr> <tr> <td align = "center" colspan = "4"> <input type = "Vade =" save "onclick =" setParamslist (); "/> <input type = value =" return "/> </td> </tr>;

2. Связанные функции JS

 function setParamSlist () {var tab = document.getElementById ("tab"); // таблицы строк var rows = tab.rows.length; // Таблицы столбцов var cells = tab.rows.item (0) .cells.length; // оповещение ("Rows"+Rows+"Cells"+Cells); var rowdata = ""; for (var i = 1; i <rous; i ++) {var cellsData = new Array (); for (var j = 0; j <cells-1; j ++) {cellsdata.push (tab.rows [i] .cells [j] .innertext); } rowdata = rowdata + "|" + cellsdata; } document.getElementById ("paramsList"). value = rowData; } // Откройте соответствующую новую функцию интерфейса параметра приложения openApparamSpage () {var param = new object (); // Этот параметр должен быть передан. param.win = window; 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"). Value; //document.getElementById("ParamsList").value = temp + результат; добавить (результат); } // Добавить функцию параметра приложения addSort (data) {var name = data; if (name == "" || name == undefined) {return; } console.log (data); 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 (cell); cell = document.createElement ("td"); cell.AppendChild (document.createTextNode (paramCode)); row.appendchild (cell); cell = document.createElement ("td"); cell.appendchild (document.createtextnode (paramvalue)); row.appendchild (cell); var deletebutton = document.createElement ("input"); deletebutton.setattribute ("type", "кнопка"); deletebutton.setattribute ("value", "Delete"); deletebutton.onclick = function () {deletesort (paramcode); }; cell = document.createElement ("td"); cell.appendchild (deletebutton); row.appendchild (cell); document.getelementbyid ("sortlist"). Appendchild (row); } // Удалить функцию функции параметра приложения deleteSort (id) {if (id! = Null) {var rowtoDelete = document.getElementbyid (id); var sortList = document.getElementById ("sortList"); sortlist.removechild (rowtodelete); }}

Функция модификации для прикрепленных таблиц

 // всплывающая информация о функции интерфейса обновления обновления (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 (); // Этот параметр должен быть передан. param.win = window; param.id = 100; param.name = "test"; param.birthday = new Date (); var result = window.showmodaldialog (baseurl + "app/upplyparamsitem? id =" + id + "¶mname =" + paramname + "¶mcode =" + paramcode + "¶mvalue =" + paramvalue, "Dialogwidth: 500px; dialogHeight: 600px; 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. Закройте полосу, добавить или изменить параметры, и напишите соответствующие данные.

 <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.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/head.html"/> </head> <body> <div> <div> </div> <form> <table cellpacing = "1" cellpadding = "2"> <tr> <td> Имя параметра: </td> <td> <input type = "text" maxlength = "20" требуется = "true" id = "paramname" name = "paramname"/> </td> </tr> <td> <td> encem type = "text" maxlength = "20" обязательный = "true" id = "paramcode" name = "paramcode" required = "true"/> </td> </tr> <tr> <td> Значение параметра: </td> <td> <input type = "text" maxlength = "20" требуется = "true" = "paramvalue" = "paramvale ="/«travel =" true "= paramValue" = "/"/"/true"/true "/" true "/true"/"/true"/true "/true"/"/true"/"trane"/"/true"/true "/true"/"/true"/"trane"/"/"/" </tr> <tr> <td align = "center" colspan = "4"> <input type = "value =" save "onclick =" returnResult (); "/> <input type =" value = "return" OnClick = closeWindow (); "/> </td> </tr> </table> </form> </div> </> </td> </tr> </table> </form> </ht> type = "text/javaScript"> // Закройте окно непосредственно функция BloseWindow () {window.close (); } // Получите значение, возвращайте функцию после сборки returnResult () {if (! $ ('Form'). Valid ()) return; var paramname = document.getElementById ("paramName"); var paramcode = document.getElementById ("paramCode"); var paramvalue = document.getElementByid ("paramvalue"); // alert ("значение" + paramname.value + "," + paramcode.value + "," + paramvalue.value); var result = paramname.value + "," + paramcode.value + "," + paramvalue.value; window.returnValue = результат; window.close (); } </script>

Выше приведено полное описание функций добавления, модификации и удаления (рекомендуется) динамических таблиц реализации JS, введенных вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!