JS实现动态表格的添加，修改，删除功能（推荐）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" height="500"/></td>
</tr>
<tr>
<table id="tab" width="100%" cellspacing="1" cellpadding="0" border="0" 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 = ElementById("tab");
//表格⾏数
var rows = ws.length ;
//表格列数
var cells = ws.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.ws[i].cells[j].innerText);
}
rowData = rowData + "|" + cellsData;
}
}
//打开相关新增应⽤参数界⾯
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 = ElementById("paramslist").value;
//ElementById("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 = ateElement("tr");
row.setAttribute("id", paramCode);
var cell = ateElement("td");
sort函数 js
cell.ateTextNode(paramName));
row.appendChild(cell);
cell = ateElement("td");
cell.ateTextNode(paramCode));
row.appendChild(cell);
cell = ateElement("td");
cell.ateTextNode(paramValue));
row.appendChild(cell);
var deleteButton = ateElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
cell = ateElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
}
// 删除应⽤参数函数
function deleteSort(id) {
if (id!=null){
var rowToDelete = ElementById(id);
var sortList = ElementById("sortList");
}
}
附加表格的修改函数
//弹出更新界⾯相关信息
function updateSort(id) {
if (id!=null){
var row = ElementById(id);
//alert("row is " + lls[0].innerHTML);
var id = lls[0].innerHTML;
var paramName = lls[1].innerHTML;
var paramCode = lls[2].innerHTML;
var paramValue = lls[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(",");
}
}
3. 弹出框页⾯，新增或者修改参数，并回写相关数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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 = ElementById("paramName");
var paramCode = ElementById("paramCode");
var paramValue = ElementById("paramValue");
/
/alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value);
var result = paramName.value + "," + paramCode.value + "," + paramValue.value;
window.close();
}
</script>
以上所述是⼩编给⼤家介绍的JS实现动态表格的添加，修改，删除功能(推荐)全部叙述，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论