JS implements the function of adding modifying and deleting dynamic tables recommended by of
- 2021-06-28 11:09:08
- OfStack
1. First configure a table frame on the page
<tr>
<td> New parameters :</td>
<td class="pn-fcontent"><input type="button" value=" Choice " 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>
<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>
<tr>
<td align="center" colspan="4">
<input type="submit" class="btn" value=" Preservation " onclick="setParamslist();"/>
<input type="button" class="btn" value=" Return "/>
</td>
</tr>
2. Related JS functions
function setParamslist() {
var tab = document.getElementById("tab");
// Number of table rows
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 related new application parameter interface
function openAppParamsPage() {
var param = new Object();
// This parameter 1 Definitely pass.
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 Apply Parameter Function
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.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 Apply Parameter Function
function deleteSort(id) {
if (id!=null){
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}
Modification function for additional tables
// Pop-up update interface related information
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 1 Definitely pass.
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 page, add or modify parameters, and write back related 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> New Applications </title>
<#include "/views/head.html"/>
</head>
<body>
<div class="body-box">
<div class="clear"></div>
<form >
<table width="100%" cellspacing="1" cellpadding="2" border="0" class="pn-ftable">
<tr>
<td> Parameter Name :</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramName" name="paramName"/></td>
</tr>
<tr>
<td> Parameter Encoding :</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramCode" name="paramCode" required="true" /></td>
</tr>
<tr>
<td> parameter values :</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramValue" name="paramValue" required="true" /></td>
</tr>
<tr>
<td align="center" colspan="4">
<input type="submit" value=" Preservation " 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 and return after assembly
function 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>