JS实现动态表格的添加，修改，删除功能(推荐)
1.首先在页面中配置好一个表格框架
<tr> <td>新增参数:</td> <tdclass="pn-fcontent"><inputtype="button"value="选择"onclick="openAppParamsPage();"/></td> <td>参数列表:</td> <tdclass="pn-fcontent"><inputtype="hidden"id="paramslist"name="paramslist"style="width:190%"height="500"/></td> </tr> <tr> <tableid="tab"width="100%"cellspacing="1"cellpadding="0"border="0"style=""class="pn-ltable"> <tr> <tdheight="20"valign="top"align="center"> 参数名称: </td> <tdheight="20"valign="top"align="center"> 参数编码: </td> <tdheight="20"valign="top"align="center"> 参数值: </td> <tdid="pos_1"height="20"> 操作 </td> </tr> <tbodyid="sortList"></tbody> </table> </tr> <tr> <tdalign="center"colspan="4"> <inputtype="submit"class="btn"value="保存"onclick="setParamslist();"/> <inputtype="button"class="btn"value="返回"/> </td> </tr>
2.相关JS函数
functionsetParamslist(){
vartab=document.getElementById("tab");
//表格行数
varrows=tab.rows.length;
//表格列数
varcells=tab.rows.item(0).cells.length;
//alert("行数"+rows+"列数"+cells);
varrowData="";
for(vari=1;i<rows;i++){
varcellsData=newArray();
for(varj=0;j<cells-1;j++){
cellsData.push(tab.rows[i].cells[j].innerText);
}
rowData=rowData+"|"+cellsData;
}
document.getElementById("paramslist").value=rowData;
}
//打开相关新增应用参数界面
functionopenAppParamsPage(){
varparam=newObject();
//这个参数一定要传。
param.win=window;
param.id=100;
param.name="test";
param.birthday=newDate();
varresult=window.showModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");
//vartemp=document.getElementById("paramslist").value;
//document.getElementById("paramslist").value=temp+result;
addSort(result);
}
//增加应用参数函数
functionaddSort(data){
varname=data;
if(name==""||name==undefined){
return;
}
console.log(data);
varparams=data.split(",");
varparamName=params[0];
varparamCode=params[1];
varparamValue=params[2];
varrow=document.createElement("tr");
row.setAttribute("id",paramCode);
varcell=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);
vardeleteButton=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);
}
//删除应用参数函数
functiondeleteSort(id){
if(id!=null){
varrowToDelete=document.getElementById(id);
varsortList=document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}
附加表格的修改函数
//弹出更新界面相关信息
functionupdateSort(id){
if(id!=null){
varrow=document.getElementById(id);
//alert("rowis"+row.cells[0].innerHTML);
varid=row.cells[0].innerHTML;
varparamName=row.cells[1].innerHTML;
varparamCode=row.cells[2].innerHTML;
varparamValue=row.cells[3].innerHTML;
varparam=newObject();
//这个参数一定要传。
param.win=window;
param.id=100;
param.name="test";
param.birthday=newDate();
varresult=window.showModalDialog(baseUrl+"app/updateParamsItem?id="+id+"¶mName="+paramName+"¶mCode="+paramCode+"¶mValue="+paramValue,
"dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");
vararr=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.弹出框页面，新增或者修改参数，并回写相关数据。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>新增应用</title>
<#include"/views/head.html"/>
</head>
<body>
<divclass="body-box">
<divclass="clear"></div>
<form>
<tablewidth="100%"cellspacing="1"cellpadding="2"border="0"class="pn-ftable">
<tr>
<td>参数名称:</td>
<tdclass="pn-fcontent"><inputtype="text"maxlength="20"class=""required="true"id="paramName"name="paramName"/></td>
</tr>
<tr>
<td>参数编码:</td>
<tdclass="pn-fcontent"><inputtype="text"maxlength="20"class=""required="true"id="paramCode"name="paramCode"required="true"/></td>
</tr>
<tr>
<td>参数值:</td>
<tdclass="pn-fcontent"><inputtype="text"maxlength="20"class=""required="true"id="paramValue"name="paramValue"required="true"/></td>
</tr>
<tr>
<tdalign="center"colspan="4">
<inputtype="submit"value="保存"onclick="returnResult();"/>
<inputtype="button"value="返回"onclick="closeWindow();"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<scripttype="text/javascript">
//直接关闭窗口
functioncloseWindow(){
window.close();
}
//获取值，组装后返回
functionreturnResult(){
if(!$('form').valid())
return;
varparamName=document.getElementById("paramName");
varparamCode=document.getElementById("paramCode");
varparamValue=document.getElementById("paramValue");
//alert("valueis"+paramName.value+","+paramCode.value+","+paramValue.value);
varresult=paramName.value+","+paramCode.value+","+paramValue.value;
window.returnValue=result;
window.close();
}
</script>
以上所述是小编给大家介绍的JS实现动态表格的添加，修改，删除功能(推荐)全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！