表格的动态管理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的动态管理</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val()
var phone=$("#phone").val()
var sex=$("#sex").is(":checked")?"男":"女"
var address=$("#address").val()
$("table tbody").append("<tr><td>"+name+"</td><td>"+phone+"</td><td>"+sex+"</td><td>"+address+"</td><td><input type='button' value='删除' onclick='$(this).parent().parent().remove()'/></td></tr>")
return false
})
$("table tbody tr input[type=button]").click(function(){
$(this).parent().parent().remove()
})
})
</script>
</head>
<body>
<table class="table" border="1" >
<thead>
<tr>
<th>姓名</th>
<th>电话</th>
<th>性别</th>
<th>地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>小格</td>
<td>13712345678</td>
<td>男</td>
<td>中国XX省XX市XX县</td>
<td><input type="button" value="删除" /></td>
</tr>
<tr>
<td>小莱</td>
<td>13312345678</td>
<td>男</td>
<td>中国XX省XX市XX县</td>
<td><input type="button" value="删除" /></td>
</tr>
<tr>
<td>小刘</td>
<td>13233333333</td>
<td>女</td>
<td>中国XX省XX市XX县</td>
<td><input type="button" value="删除" /></td>
</tr>
<tr>
<td>小陈</td>
<td>18912345678</td>
<td>女</td>
<td>中国XX省XX市XX县</td>
<td><input type="button" value="删除" /></td>
</tr>
</tbody>
</table>
<form action="" method="post">
<label>姓名：</label><input type="text" id="name" value="" placeholder="姓名" /><br />
<label>电话：</label><input type="text" id="phone" value="" placeholder="电话" /><br />
<label>性别：</label><input type="radio" id="sex" value="" name="sex" checked="checked"/>男<input type="radio" name="sex" id="" value="" />女<br />
<label>地址：</label><input type="text" id="address" value="" placeholder="地址" /><br />
<button id="btn"> 提交</button>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
