js 动态添加表单 table tr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 动态添加表单</title>
<script src="scripts/jquery-1.7.1.min.js"></script> </head>
<body>
<script type="text/javascript">
$(function(){
// 提交按钮添加 click事件
$("#addBtn").click(function(){
// 获取form的值
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
var phone = $("input[name='phone']").val();
// 在table 中生成tr
var tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='#' onclick='deleteItem(this);'>删除</a></td></tr>");
$("table").append(tr);
// form重置,清除刚才表单填写的内容
$("form")[0].reset();
});
});
// 删除
function deleteItem(a){
// 删除 a 元素所在行
$(a).parents("tr").remove();
}
</script>
<div align="center">
<h3>添加表单</h3>
<form>
姓名 <input type="text" name="name" />
邮箱 <input type="text" name="email" />
电话 <input type="text" name="phone" />
<input type="button" value="提交" id="addBtn" />
</form>
<hr/>
<table border="1">
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>删除</th>
</tr>
</table>
</div>
</body>
</html>
js 动态添加表单 table tr的更多相关文章
- javascript实现的动态添加表单元素input,button等(appendChild)
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...
- jquery动态添加表单数据
动态添加用户 实现代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...
- JS动态创建表单post提交
<script> //@创建表单方法 function post(URL, PARAMS) { var temp = document.createElement("form&q ...
- js动态添加行和列(table)
function AddTableRow() { var Table = document.getElementById("NewTable"); //取得自定义的表对象 NewR ...
- js动态添加和删除table的行例子
<table id="table_report" class="table table-striped table-bordered table-hover&quo ...
- vue 使用 element ui动态添加表单
html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...
- js动态创建表单数据
var formData = new FormData(); formData.append("file",fileList[i]); formData.append(" ...
- 动态增加表单元素并获取元素的text和value提交
以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...
- 使用js动态添加组件
在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高 手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
随机推荐
- jackson实体为NULL或者为空不显示
1.实体上 @JsonInclude(JsonInclude.Include.NON_NULL) 将该注解放在属性上,如果该属性为null则不参与序列化: 如果放在类上边,那对这个类的全部属性起作用 ...
- HDU - 2586 How far away ?(离线Tarjan算法)
1.给定一棵树,每条边都有一定的权值,q次询问,每次询问某两点间的距离. 2.这样就可以用LCA来解,首先找到u, v 两点的lca,然后计算一下距离值就可以了. 这里的计算方法是,记下根结点到任意一 ...
- codeforces 682D D. Alyona and Strings(dp)
题目链接: D. Alyona and Strings time limit per test 2 seconds memory limit per test 256 megabytes input ...
- I.MX6 简单电路模拟USB设备的插入
/**************************************************************************** * I.MX6 简单电路模拟USB设备的插入 ...
- CodeForces-652D:Nested Segments(树状数组+离散化)
You are given n segments on a line. There are no ends of some segments that coincide. For each segme ...
- UI:数据的解析
在懒加载的时候要注意事项: 必须使用 self.XX 的样式去开辟空间,不能使用 _XX 的格式去开辟,因为前者是内部的 set 方法,而后者并不走内部的 set 方法. json 文件的创建 xm ...
- Pessimistic Offline Lock悲观离线锁
每次只允许一个业务事务来访问数据,以防止并发业务事务中的冲突. 离线并发处理通常会出现多个业务事务操作同一数据. 最简单的办法是为整个业务事务保持一个系统事务.但是事务系统不适合于处理长事务. 首选乐 ...
- 51nod 1122 机器人走方格 V4 【矩阵快速幂】
首先建立矩阵,给每个格子编号,然后在4*4的格子中把能一步走到的格子置为1,然后乘n次即可,这里要用到矩阵快速幂 #include<iostream> #include<cstdio ...
- 爬虫—Selenium爬取JD商品信息
一,抓取分析 本次目标是爬取京东商品信息,包括商品的图片,名称,价格,评价人数,店铺名称.抓取入口就是京东的搜索页面,这个链接可以通过直接构造参数访问https://search.jd.com/Sea ...
- Spring AOP 面向切面编程入门
什么是AOP AOP(Aspect Oriented Programming),即面向切面编程.众所周知,OOP(面向对象编程)通过的是继承.封装和多态等概念来建立一种对象层次结构,用于模拟公共行为的 ...