复制代码

jquerylib表单

用jquerylib,实现表格添加内容和删除内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquerylib/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#a2").on('click','.a1',function(){
					 $(this).closest('tr').remove();
				});
				
				$("#a3").click(function(){
					var name=$("#name").val();
					var age=$("#age").val();
					var phone=$("#phone").val();
					$("table").append("<tr><td>"+name+"</td><td>"+age+"</td><td>"+phone+"</td><td class='a1'><a href='javascript:void(0)'>删除</a></td></tr>");
				});
			});
		</script>
	</head>
<body>
				<center>
		<form class="form" action="" method="post">
			姓名: <input type="text" name="" id="name" value="" />
			年龄: <input type="number" name="" id="age" value="" />
			电话: <input type="tel" name="" id="phone" value="" />
			<br />
			<br />
			<br />
			<input type="button" value="提交" id="a3"/>
		</form>
		<table border="1" width="600" cellspacing="" cellpadding="" background="img/016.jpg" width="100" id="a2">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>电话</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>瑶瑶</td>
				<td>8</td>
				<td>135444</td>
				<td class="a1"><a href="javascript:void(0)">删除</a></td>
			</tr>
			<tr>
				<td>渝儿</td>
				<td>24</td>
				<td>1356666666</td>
				<td class="a1"><a href="javascript:void(0)">删除</a></td>
			</tr>
			<tr>
				<td>傻逼</td>
				<td>18</td>
				<td>1355555555</td>
				<td class="a1"><a href="javascript:void(0)">删除</a></td>
			</tr>
		</table>
		</center>
	</body>
</html>

  

posted @ 2021-06-21 20:14  怪~咖  阅读(40)  评论(0编辑  收藏  举报
复制代码