20、formAdd,javascript实现动态添加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#userTable{
border: 1px solid black;
}
tr,td{
border: 1px solid black;
margin: 0px; }
</style>
</head>
<body>
姓名:
<input type="text" name="name" id="name">   电话:
<input type="text" name="del" id="del">   年龄:
<input type="text" name="age" id="age">
</br>
</br>
<input type="button" onclick="add()" value="添加"> <table id="userTable">
<tr>
<td>姓名</td>
<td>电话</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>李钟硕</td>
<td>18341893451</td>
<td>28</td>
<td><a href="javascript:void(0)" onclick="del(this)">delete</a></td>
</tr>
<tr>
<td>高俊熙</td>
<td>18341895832</td>
<td>26</td>
<td><a href="javascript:void(0)" onclick="del(this)">delete</a></td>
</tr>
</table>
</body>
<script type="text/javascript">
function add() {
var name = document.getElementById("name").value;
var del = document.getElementById("del").value;
var age = document.getElementById("age").value;
var tr = document.createElement("tr");
tr.innerHTML = "<td>"
+ name
+ "</td><td>"
+ del
+ "</td><td>"
+ age
+ "</td><td><a href='javascript:void(0)' onclick='del(this)'>delete</a></td>";
document.getElementById("userTable").appendChild(tr);
}
function del(a) {
a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
}
</script>
</html>
20、formAdd,javascript实现动态添加的更多相关文章
- JavaScript实现动态添加员工
html代码: <div id="empAdd"> <fieldset> <legend><strong>添加员工</stro ...
- javascript;select动态添加和删除option
<select id="sltCity"></select> //添加Option. var optionObj = new Option(text, va ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- ASP.NET页面动态添加js脚本
有时我们需要生成自己的JavaScript代码并在运行时动态添加到页面,接下来我们来看一下如何将生成的JavaScript代码动态添加到ASP.NET页面. 为了添加脚本,要将自定义的脚本在一个字符串 ...
- jquery append 动态添加的元素事件on 不起作用问题的解决
on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- window10安装mysql-5.7.20-winx64.zip
window10安装mysql--winx64.zip 原文 https://www.cnblogs.com/ericli-ericli/p/6916285.html D:\share\src\win ...
- CF446D DZY Loves Games
CF446D DZY Loves Games 高斯消元好题 如果暴力地,令f[i][k]表示到i,有k条命的概率,就没法做了. 转化题意 生命取决于经过陷阱的个数 把这个看成一步 所以考虑从一个陷阱到 ...
- Procedure or function 'pu_usr_User' expects parameter '@WhiteIp', which was not supplied.
遇到这个问题,是因为存储过程的参数,设置默认值写错了. 错误写法 @WhiteIp NVARCHAR(MAX) NULL, Stored procedure with default paramete ...
- 2017《Java技术》预备作业 计科1502任秀兴
阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我认为,学生和老师的关系,应该亦师亦友.可以以一种朋友的身份去进行教学,是我们理想中的课堂. 在生活中,老师和我们应该多沟通,成为朋友,在有感情的 ...
- Java学习之抽象类
抽象类特点: 1.抽象方法必须定义在抽象类中2.abstract关键字修饰:只能修饰类和方法3.抽象类不能实例化4.抽象类中的方法要被使用,必须由子类重写所有的抽象方法,实例化其子类 如果子类只重写部 ...
- Java学习之构造函数
构造函数特点: 函数名和类名相同 没有返回值(不用定义返回值类型)作用: 对象初始化注意: 如果类没有定义构造函数时,系统会默认定义一个无参的构造函数 如果定义了构造函数,系统不会定义构造函 ...
- python中输入多个数字（代码实现）
不多说,直接上代码: list1 = [] #定义一个空列表 str1 = input("请输入数值,用空格隔开:") # list2 = str1.split(" &q ...
- Gradle教程
Ant和Maven共享在Java市场上相当大的成功.ANT是在2000年发布了第一个版本的工具,它是基于程序编程思想的发展. 后来,人们在 Apache-Ivy的帮助下,网络接受插件和依赖管理的能力有 ...
- python tkinter 实现 带界面(GUI)的RSA加密、签名
代码环境,python3.5.2 RSA加密的过程是:使用公钥加密,私钥解密 RSA签名的过程是:使用私钥签名,公钥验证 所以核心代码就是,生成公钥私钥,使用公钥私钥分别进行加密解密. 在实际编码的时 ...
- Nodejs入门级基础+实战
这篇随笔将会按序记录如下内容: NodeJs 简介 安装 NodeJs HTTP 模块.URL 模块 CommonJs 和 Nodejs 中自定义模块 NodeJs FS 模块 利用 HTTP 模块 ...