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); 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); } }