首页 > Web开发 > 详细

jquerylib

时间:2021-06-21 23:57:25      阅读:35      评论:0      收藏:0      [点我收藏+]

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

  技术分享图片技术分享图片

jquerylib

原文:https://www.cnblogs.com/wzcc/p/14915541.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!