JS实现动态表格的添加，修改，删除功能(推荐)

前端技术 2023/09/02 JavaScript

1. 首先在页面中配置好一个表格框架

<tr> 
<td>新增参数:</td> 
<td class=\"pn-fcontent\"><input type=\"button\" value=\"选择\" onclick=\"openAppParamsPage();\"/></td> 
<td>参数列表:</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\"> 
参数名称: 
</td> 
<td height=\"20\" valign=\"top\" align=\"center\"> 
参数编码: 
</td> 
<td height=\"20\" valign=\"top\" align=\"center\"> 
参数值: 
</td> 
<td id=\"pos_1\" height=\"20\"> 
操作 
</td> 
</tr> 
<tbody id=\"sortList\"></tbody> 
</table> 
</tr> 
<tr> 
<td align=\"center\" colspan=\"4\"> 
<input type=\"submit\" class=\"btn\" value=\"保存\" onclick=\"setParamslist();\"/> 
<input type=\"button\" class=\"btn\" value=\"返回\"/> 
</td> 
</tr>

2. 相关JS函数

function setParamslist() { 
var tab = document.getElementById(\"tab\"); 
//表格行数 
var rows = tab.rows.length ; 
//表格列数 
var cells = tab.rows.item(0).cells.length ; 
//alert(\"行数\"+rows+\"列数\"+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; 
} 
//打开相关新增应用参数界面 
function openAppParamsPage() { 
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 + result; 
addSort(result); 
} 
// 增加应用参数函数 
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\", \"删除\"); 
deleteButton.onclick = function () { deleteSort(paramCode); }; 
cell = document.createElement(\"td\"); 
cell.appendChild(deleteButton); 
row.appendChild(cell); 
document.getElementById(\"sortList\").appendChild(row); 
} 
// 删除应用参数函数 
function deleteSort(id) { 
if (id!=null){ 
var rowToDelete = document.getElementById(id); 
var sortList = document.getElementById(\"sortList\"); 
sortList.removeChild(rowToDelete); 
} 
}

附加表格的修改函数

//弹出更新界面相关信息 
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(); 
//这个参数一定要传。 
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. 弹出框页面，新增或者修改参数，并回写相关数据。

<!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>新增应用</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>参数名称:</td> 
<td class=\"pn-fcontent\"><input type=\"text\" maxlength=\"20\" class=\"\" required=\"true\" id=\"paramName\" name=\"paramName\"/></td> 
</tr> 
<tr> 
<td>参数编码:</td> 
<td class=\"pn-fcontent\"><input type=\"text\" maxlength=\"20\" class=\"\" required=\"true\" id=\"paramCode\" name=\"paramCode\" required=\"true\" /></td> 
</tr> 
<tr> 
<td>参数值:</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=\"保存\" onclick=\"returnResult();\"/> 
<input type=\"button\" value=\"返回\" onclick=\"closeWindow();\"/> 
</td> 
</tr> 
</table> 
</form> 
</div> 
</body> 
</html> 
<script type=\"text/javascript\"> 
//直接关闭窗口 
function closeWindow() { 
window.close(); 
} 
//获取值，组装后返回 
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>

以上所述是小编给大家介绍的JS实现动态表格的添加，修改，删除功能(推荐)全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/4105

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案