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实现动态表格的添加,修改,删除功能(推荐)全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!