原来看到这个代码的时候,觉得功能不错,调试并整理了一下也许大家用的到,对于越来越注重用户体验的今天,这种功能一定很受欢迎,当然本例子只是一个演示效果,具体怎么用还要结合实际应用,类似的功能如:动态增加或删除上传图片的数量等等。
截图:
代码作者:上善若水
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>使用Javascript动态增加,删除表格 - 中国asp之家 - Aspxhome.com</title> <script language="javascript"> function deleteRow(index){ var tableObj=document.getElementById("mytable"); tableObj.deleteRow(index); } function addRow(){ var tableObj=document.getElementById("mytable"); var newRowObj=tableObj.insertRow(tableObj.rows.length); var newColName=newRowObj.insertCell(newRowObj.cells.length); var newColAge=newRowObj.insertCell(newRowObj.cells.length); var newColButton=newRowObj.insertCell(newRowObj.cells.length); newColName.innerHTML=document.getElementById("newName").value; newColAge.innerHTML=document.getElementById("newAge").value; newColButton.innerHTML='<input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">'; } </script> </head> <body> <table width="100%" id="mytable" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor=#EDF5FF> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr> <tr> <td>中国asp之家</td> <td>28</td> <td><input type="button" onclick="deleteRow(0)" value="删除"/></td> </tr> <tr> <td>www.aspxhome.com</td> <td>33</td> <td><input type="button" onclick="deleteRow(1)" value="删除"/></td> </tr> </table> 操作: <input type="text" name="name" id="newName" /> <input type="text" name="age" id="newAge"/> <input type="button" onclick="addRow();" value="新增"/> <p><a href=http://www.aspxhome.com>中国asp之家</a></p> </body> </html> [提示:你可先修改部分代码,再按运行]