使用Javascript动态增加，删除表格

来源：asp之家时间：2008-02-03 19:15:00　

原来看到这个代码的时候，觉得功能不错，调试并整理了一下也许大家用的到，对于越来越注重用户体验的今天，这种功能一定很受欢迎，当然本例子只是一个演示效果，具体怎么用还要结合实际应用，类似的功能如：动态增加或删除上传图片的数量等等。

截图：

代码作者：上善若水

<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>

标签：表格,增加,删除,Javascript

投稿

使用Javascript动态增加，删除表格

猜你喜欢

asp简单可逆运算字符串加密解密函数

asp如何让我的网页自动适应客户端的屏幕分辨率？

DreamWeaver操作超级技巧大全

8个asp生成随机字符的函数

把JS与CSS写在同一个文件里

HTML 标签是否匹配检测代码

统一的品牌设计

asp网站生成静态页面攻略

怎么样在网页上读取远程xml的数据

讲解无法打开用户默认数据库的解决方法

js字放大效果

如何把小写数字转换成英文？

选择一个优秀正文字体的15个技巧

如何配置一个稳定的SQL Server数据库

sqlserver 存储过程动态参数调用实现代码

错误 2812: 未能找到存储过程 'master.dbo.xp_fileexist'

最具创意的广告牌全集

如何对MySQL数据库日志文件进行维护

SQL Server端口更改后的数据库连接方式

小技巧解决“FF不能读取outerHTML”的问题