1. First configure a table frame in the page
<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"> 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"> <input type="submit" value="Save" onclick="setParamslist();"/> <input type="button" value="Return"/> </td> </tr>
2. Related JS functions
function setParamslist() { var tab = document.getElementById("tab"); //Table rows var rows = tab.rows.length; //Table columns var cells = tab.rows.item(0).cells.length; //alert("rows"+rows+"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 relevant new 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); } // Add the function of application parameter 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", "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 function deleteSort(id) { if (id!=null){ var rowToDelete = document.getElementById(id); var sortList = document.getElementById("sortList"); sortList.removeChild(rowToDelete); } }Modification function for attached tables
//Pop up information about the update interface 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 + "¶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. Pop up the box page, add or modify parameters, and write back the relevant data.
<!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>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" required="true" id="paramCode" name="paramCode" required="true" /></td> </tr> <tr> <td>Parameter value:</td> <td><input type="text" maxlength="20" required="true" id="paramValue" name="paramValue" required="true" /></td> </tr> <tr> <td align="center" colspan="4"> <input type="submit" value="Save" onclick="returnResult();"/> <input type="button" value="Return" onclick="closeWindow();"/> </td> </tr> </table> </form> </div> </body> </html> <script type="text/javascript"> //Close the window directly function closeWindow() { window.close(); } //Get the value, return function after assembly returnResult() { if(!$('form').valid()) return; var paramName = document.getElementById("paramName"); var paramCode = document.getElementById("paramCode"); var paramValue = document.getElementById("paramValue"); //alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value); var result = paramName.value + "," + paramCode.value + "," + paramValue.value; window.returnValue = result; window.close(); } </script>The above is the full description of the addition, modification, and deletion functions (recommended) of JS implementation dynamic tables introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!