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/ ...
随机推荐
- js 对象浅拷贝和深拷贝
var model={name:"boy",age:13}; var CopyModel=model; console.log(CopyModel.name); model.nam ...
- 尚学linux课程---11、vim操作命令1
尚学linux课程---11.vim操作命令1 一.总结 一句话总结: 要看不同的视频,每个视频的关键点都不一样,不如之间的的视频就没讲到vim中set nu是什么意思 1.Vi有三种基本工作模式? ...
- 在pycharm中切换python版本的方法
转载自:https://blog.csdn.net/sgfmby1994/article/details/77876873 目前,python2和python3都有很重要的意义,所以,我们经常会在电脑 ...
- MySQL date_sub 和 date_add 函数
DATE_SUB: 定义和用法 DATE_SUB() 函数从日期减去指定的时间间隔. 语法 DATE_SUB(date,INTERVAL expr type) date 参数是合法的日期表达式.exp ...
- java中子类继承父类程序执行顺序
java中子类继承父类程序执行顺序 FatherTest.java public class FatherTest { private String name; public FatherTest() ...
- JWT工具类
package com.ynhrm.common.utils; import io.jsonwebtoken.Claims;import io.jsonwebtoken.JwtBuilder;impo ...
- 在响应式布局中，碰到图片不会自动缩放，因此需要一段js脚本
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...
- CFile CStdioFile CArchive 文件操作之异同（详细）
两者的主要区别: 一. CFile类操作文件默认的是Binary模式,CStdioFile类操作文件默认的是Text模式. 在Binary模式下我们必须输入'\r\n',才能起到回车换行的效果, ...
- mac 卸载编辑器卸不干净
Configuration ~/Library/Preferences/ Caches ~/Library/Caches/ Plugins ~/Library/Application Support/ ...
- Vue_子级组件调用主组件函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...