JS实现动态表格的添加,修改,删除功能实现动态表格的添加,修改,删除功能(推荐推荐)
主要介绍了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" 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);
评论0