位置：首页>> 网络编程>> JavaScript>> 使用Javascript动态增加，删除表格

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

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

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

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

截图：

代码作者：上善若水

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

0

投稿

猜你喜欢

Firefox扩展工具：Firebug调试经验与技巧
不了解的同学先“点这里”看看什么是Firebug。简单来说，Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DO
oracle学习笔记(二)
一、多行函数又称组合函数（Group Functions）、聚合函数 1、 Types of Group Functions avg、cou
设计能力决定权力
上周在去杭州betacafe的路上，有幸和绿人网梁宁和饭统网李耀东、千鸟一道，在出租车上聊起了地理和历史，其中有一个共同的观点是说，人们对事
用画为5.12地震受灾同胞们祈福
今年我们的祖国多灾多难雪灾的阴影还没散去又发生了地震。让我们用手中的画笔为5.12地震受灾同胞们祈福并号召大家为灾区人民捐款！中国插画网祈
触手生春【4.13】CSS中的伪元素选择符
同伪类的方式类似，伪元素通过对插人到文档中的虚构元素进行触发，从而达到某种效果。在CSS1里，有两个伪元素，即：first-letter和f
考虑SQL Server安全时所应注意的几个方面
安全性问题一直DBA是比较关心的问题，因为建立数据库的目的就是让相关的的客户端来进行访问，所以很难避免不出现安全隐患，例如客户端链接的权限、
SQLServer中用T—SQL命令查询一个数据库中有哪些表的sql语句
1、查询SQL中的所有表： Select TABLE_NAME FROM 数据库名称.INFORMATION_SCHEMA.TABLES W
在网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历，如今，众多网页的设计都用到了表格。这样不仅有利于网页的维护，同时，提高了网页的观赏性。在众多网页制作风格中，细
IE里模拟DOMContentLoaded事件
也许还有朋友不太清楚DOMContentLoaded这个事件。简单的说，这个事件就是要在大多数情况下去替代window.onload事件，因
谈谈图片如何影响转换率
你喜欢在博客文章中使用图片吗？是的，如果不是很麻烦的话，相信大家都不会介意放上几张漂亮的图片来点缀一下内容的，不过你的图片可能会导致下面的两
css布局自适应高度方法
作者: Alan Pearce原文: Multi-Column Layouts Climb Out of the Box地址: http:/
Sql server数据库优化
最近发现数据库服务器压力很大，CPU经常达到100％。查看进程，发现有大量的sp_cursorclose;1进程信息。网上查了下，出现sp_
ASP设计常见问题及解答精要
作为微软推出的网页与数据库解决方案，ASP由于有微软得天独厚的操作系统等技术后盾支持，因此得到了迅速的发展，并且正受到越来越多的欢迎，在目前
体验DW MX 2004 CSS新功能
CSS是制作网页效果必不可少的东西，字体的颜色定义、表格的样式定义、图片的特效等等都少不了它。但在Dr
xhtml有哪些块级元素
* address - 地址 * blockquote - 块引用 * center - 举中对齐块 * di
VBScript中LBound函数和UBound函数的用法
LBound函数：返回指定数组维的最小可用下标；UBound函数：返回指定数组维的最小可用上标；LBound(arrayname, [,di
小诀窍让你快速上手Dreamweaver
1、善用拖放技术我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显得
javascript的正则表达式
校验是否全由数字组成function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.
一个很棒的js图片代码
一个JavaScript代码编写的图片展示特效，效果很棒。效果图：演示：<!DOCTYPE HTML PUBLIC "-//
网页设计中的对比原则与接近性原则
一、网页设计中的对比原则一件网页设计作品由许多元素构成，它们的重要性各不相同，其中一些元素的重要性要高于其它元素。一些相互关联，而另一些则

手机版 网络编程 asp之家 www.aspxhome.com