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


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