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/ ...
随机推荐
- [NOIP模拟25]题解
A.字符串 Catalan数不能再裸了 #include<cstdio> #include<iostream> #include<cstring> using na ...
- cookie的使用说明
cookie的英文意思是饼干的意思,实质上是键值对组成的字典.就是说你访问某一个网址,服务器给你一个东西,你收到东西,并且贴上了一个标签.下次你访问服务器的时候,请求带有标签.这样服务器给你之后,就会 ...
- windows环境下安装pymysql（操作带图）
在windows环境下安装pymysql,首先要找到python的安装位置,如果在c盘,启动cmd的时候,要获取管理员权限. 具体步骤,一,管理员模式启动cmd.在箭头指定位置,搜索cmd,出现快捷方 ...
- SQL执行计划详解explain
1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_k ...
- tomcat7以下线程控制
web server允许的最大线程连接数还受制于操作系统的内核参数设置,通常Windows是2000个左右,Linux是1000个左右. 1.编辑tomcat安装目录下的conf目录下的server. ...
- 关于radio选中或者反选
关注点:一.attr()和prop()的区别 <!DOCTYPE html> <html> <head> <title>JavaScript对文字按 ...
- PHP面试 AJAX基础内容
AJAX基础内容 Ajax的基本工作原理 Ajax基础概念:通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新 Ajax工作原理:XMLHttpRequest是Ajax的基础 ...
- 运维 06 vim与程序员
vim与程序员 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以 ...
- Django 同步数据库的时候app中的models的表没有成功创建
出现 no changes detected python3 manage.py makemigrations --empty blog # blog就是你的app名字,此处要写成自己的app名字 ...
- docker对容器进行资源限制
对内存进行资源限制 docker run --memory=200m soymilk/stress 对cpu进行资源限制 终端1 docker run --name=test1 --cpu-share ...