使用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动态增加，删除表格

猜你喜欢

MySQL时间设置注意事项的深入总结

Tensorflow分批量读取数据教程

pycharm解决关闭flask后依旧可以访问服务的问题

ASP.NET MVC4入门教程（二）：添加一个控制器

如何利用python写GUI及生成.exe可执行文件

Python迭代器iterator生成器generator使用解析

oracle索引总结

SQLSERVER记录登录用户的登录时间(自写脚本)

Python利用selenium建立代理ip池访问网站的全过程

如何在ADSI中查询用户属性？

python爬虫爬取网页表格数据

Python对列表去重的多种方法(四种方法)

python中的随机数 Random介绍

golang之数组切片的具体用法

解决django migrate报错ORA-02000: missing ALWAYS keyword

如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

Unicode和Python的中文处理

MySQL binlog_ignore_db 参数的具体使用

numpy数组叠加的实现示例

mysql myisam优化设置