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 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...
随机推荐
- YTU 2915: Shape系列-1
2915: Shape系列-1 时间限制: 1 Sec 内存限制: 128 MB 提交: 283 解决: 221 题目描述 小强开始迷恋彩色的Shape,于是决定做一个Shape类.Shape类有 ...
- 如何将Eclipse中的项目迁移到Android Studio中
如果你之前有用Eclipse做过安卓开发,现在想要把Eclipse中的项目导入到Android Studio的环境中,那么首先要做的是生成Build Gradle的文件.因为Android Studi ...
- codeforces 689B B. Mike and Shortcuts(bfs)
题目链接: B. Mike and Shortcuts time limit per test 3 seconds memory limit per test 256 megabytes input ...
- 获取Android APK JNI库
/************************************************************************** * 获取Android APK JNI库 * 说 ...
- I.MX6 RGB clock 和 data 重合
/*********************************************************************** * I.MX6 RGB clock 和 data 重合 ...
- bzoj3631 [JLOI2014]松鼠的新家——树上差分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3631 树上差分:注意路径的结尾被多算了一次,最后要减去(不能提前减). 代码如下: #inc ...
- maven中添加json-lib的jar包
在maven配置文件pom.xml中添加如下配置信息: <dependency> <groupId>net.sf.json-lib</groupId> <ar ...
- 【正睿多校联盟Day4 T4 简单的数论题】
题目名有毒 由于并没有系统地开始学习数论,所以数论题基本靠暴力. 然鹅本题的题解相当简单: emmm....我当你没说 一个简单易懂的方法是这样的: 1. 欧拉定理的推论 若正整数a,n互质,则对于任 ...
- SpringMVC分页查询无法直接将对象转换成json的解决办法(报org.springframework.http.converter.HttpMessageNotWritableException: No converter found for return value of type:错)
在用ajax获得分页数据时,无法将获取的值赋值给input标签,在修改用户信息时不显示用户已经注册的信息,百度可知 springmvc处理分页数据返回的对象时,无法直接将对象转换成json,会报org ...
- python ftp小程序练习
作业要求: 开发一个支持多用户在线的FTP程序 要求: 1.用户加密认证 2.允许同时多用户登陆 3.每个用户都有自己的家目录,并且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 ...