<!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>