JS allows you to add, modify, and delete dynamic tables (recommended) and js tables.

JS allows you to add, modify, and delete dynamic tables (recommended) and js tables.

1. configure a table framework on the page.

<Tr> <td> new parameter: </td> <td class = "pn-fcontent"> <input type = "button" value = "select" onclick = "openAppParamsPage (); "/> </td> <td> parameter list: </td> <td class = "pn-fcontent"> <input type = "hidden" id = "paramslist" name = "paramslist" style = "width: 190% "height =" 500 "/> </td> </tr> <table id =" tab "width =" 100% "cellspacing =" 1 "cellpadding =" 0 "border =" 0 "style =" "class =" pn-ltable "> <tr> <td height =" 20 "valign =" top "align =" center "> parameter Name: </td> <td height = "20" valign = "top" align = "center"> parameter encoding: </td> <td height = "20" valign = "top" align = "center"> parameter values: </td> <td id = "pos_1" height = "20"> operation </td> </tr> <tbody id = "sortList"> </tbody> </ table> </tr> <td align = "center" colspan = "4"> <input type = "submit" class = "btn" value = "save" onclick = "setParamslist (); "/> <input type =" button "class =" btn "value =" return "/> </td> </tr>

2. Related JS Functions

Function setParamslist () {var tab = document. getElementById ("tab"); // table row var rows = tab. rows. length; // Number of table columns var cells = tab. rows. item (0 ). cells. length; // alert ("number of rows" + rows + "Number of columns" + cells); var rowData = ""; for (var I = 1; I <rows; 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;} // open the related newly added Application parameter interface function openAppParamsPage () {var param = new Object (); // This parameter must be passed. 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 + result; addSort (result);} // adds the application Parameter function 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. createEle Ment ("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", "button"); deleteButton. setAttribute ("value", "delete"); deleteButton. onclick = function () {deleteSort (paramCode) ;}; Cell = document. createElement ("td"); cell. appendChild (deleteButton); row. appendChild (cell); document. getElementById ("sortList "). appendChild (row);} // Delete the application Parameter function deleteSort (id) {if (id! = Null) {var rowToDelete = document. getElementById (id); var sortList = document. getElementById ("sortList"); sortList. removeChild (rowToDelete );}}

Additional table modification functions

// Function 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 (); // This parameter must be passed. Param. win = window; param. id = 100; param. name = "test"; param. birthday = new Date (); var result = window. showModalDialog (baseUrl + "app/updateParamsItem? Id = "+ id +" Your mName = "+ paramName +" Your mCode = "+ paramCode +" Your 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. On the pop-up page, add or modify parameters and write back relevant data.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
The above section describes how to add, modify, and delete dynamic tables in Javascript. I hope this will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!