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/ ...
随机推荐
- 关于Burp Suite不能抓包的解决方法
一.Burp Suite有时能抓到包,有时不能抓到包 解决方法: 出现这种问题的原因就是代理没有设置成全局的,只是设置成了局部的. 打开IE浏览器,依次打开工具->Internet 属性-> ...
- JS-ValidForm：介绍
ylbtech-JS-ValidForm:介绍 1.返回顶部 1. 关于Validform Validform:一行代码搞定整站的表单验证! 1 $(".demoform").Va ...
- Redis 单机模式，主从模式，哨兵模式(sentinel)，集群模式(cluster)，第三方模式优缺点分析
Redis 的几种常见使用方式包括: 单机模式 主从模式 哨兵模式(sentinel) 集群模式(cluster) 第三方模式 单机模式 Redis 单副本,采用单个 Redis 节点部署架构,没有备 ...
- Autofac框架详解 转载https://www.cnblogs.com/lenmom/p/9081658.html
一.组件 创建出来的对象需要从组件中来获取,组件的创建有如下4种(延续第一篇的Demo,仅仅变动所贴出的代码)方式: 1.类型创建RegisterType AutoFac能够通过反射检查一个类型,选择 ...
- Jmeter beanshell断言 org.json.jar包下载
链接:https://pan.baidu.com/s/1O01ODjlKyqmz2NyDT0MCww 提取码:a5va 欢迎关注微信公众号:软件测试汪,qq技术交流群:809111560
- Windows下搭建Wampserver+Wordpress
安装wordpress windows 下载安装包 百度云 提取码:qxzp 安装wamp WampServer就是Windows Apache Mysql PHP集成安装环境,即在window下的a ...
- 爬虫（五）—— selenium模块启动浏览器自动化测试
目录 selenium模块 一.selenium介绍 二.环境搭建 三.使用selenium模块 1.使用chrome并设置为无GUI模式 2.使用chrome有GUI模式 3.查找元素 4.获取标签 ...
- 牛客练习赛53 B 美味果冻
链接:https://ac.nowcoder.com/acm/contest/1114/B来源:牛客 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 524288K,其他语言10485 ...
- 在Python中检测*可用* CPU数量的便携方式
根据这个问题和答案 - Python multiprocessing.cpu_count()在4核Nvidia Jetson TK1上返回'1' - Python multiprocessing.cp ...
- Linux替换文件行首的空白字符
使用命令sed.cp.tail.cat 1.拷贝一个任意文件(生产环境切勿操作) cp /etc/profile /tmp 查看文件部分格式 cat /tmp/profile # /etc/profi ...