<!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的更多相关文章

  1. javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...

  2. jquery动态添加表单数据

    动态添加用户 实现代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html ...

  3. JS动态创建表单post提交

    <script> //@创建表单方法 function post(URL, PARAMS) { var temp = document.createElement("form&q ...

  4. js动态添加行和列(table)

    function AddTableRow() { var Table = document.getElementById("NewTable"); //取得自定义的表对象 NewR ...

  5. js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover&quo ...

  6. vue 使用 element ui动态添加表单

    html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...

  7. js动态创建表单数据

    var formData = new FormData(); formData.append("file",fileList[i]); formData.append(" ...

  8. 动态增加表单元素并获取元素的text和value提交

    以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...

  9. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

随机推荐

  1. YTU 2915: Shape系列-1

    2915: Shape系列-1 时间限制: 1 Sec  内存限制: 128 MB 提交: 283  解决: 221 题目描述 小强开始迷恋彩色的Shape,于是决定做一个Shape类.Shape类有 ...

  2. 如何将Eclipse中的项目迁移到Android Studio中

    如果你之前有用Eclipse做过安卓开发,现在想要把Eclipse中的项目导入到Android Studio的环境中,那么首先要做的是生成Build Gradle的文件.因为Android Studi ...

  3. codeforces 689B B. Mike and Shortcuts(bfs)

    题目链接: B. Mike and Shortcuts time limit per test 3 seconds memory limit per test 256 megabytes input ...

  4. 获取Android APK JNI库

    /************************************************************************** * 获取Android APK JNI库 * 说 ...

  5. I.MX6 RGB clock 和 data 重合

    /*********************************************************************** * I.MX6 RGB clock 和 data 重合 ...

  6. bzoj3631 [JLOI2014]松鼠的新家——树上差分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3631 树上差分:注意路径的结尾被多算了一次,最后要减去(不能提前减). 代码如下: #inc ...

  7. maven中添加json-lib的jar包

    在maven配置文件pom.xml中添加如下配置信息: <dependency> <groupId>net.sf.json-lib</groupId> <ar ...

  8. 【正睿多校联盟Day4 T4 简单的数论题】

    题目名有毒 由于并没有系统地开始学习数论,所以数论题基本靠暴力. 然鹅本题的题解相当简单: emmm....我当你没说 一个简单易懂的方法是这样的: 1. 欧拉定理的推论 若正整数a,n互质,则对于任 ...

  9. SpringMVC分页查询无法直接将对象转换成json的解决办法(报org.springframework.http.converter.HttpMessageNotWritableException: No converter found for return value of type:错)

    在用ajax获得分页数据时,无法将获取的值赋值给input标签,在修改用户信息时不显示用户已经注册的信息,百度可知 springmvc处理分页数据返回的对象时,无法直接将对象转换成json,会报org ...

  10. python ftp小程序练习

    作业要求: 开发一个支持多用户在线的FTP程序 要求: 1.用户加密认证 2.允许同时多用户登陆 3.每个用户都有自己的家目录,并且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 ...