版权声明：本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正。 https://blog.csdn.net/qq_30225725/article/details/89914100
效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业讲解</title>
<!-- <script type="text/javascript" src="./js/jquery.min.js"></script> -->
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
<style type="text/css">
.div1{
text-align: center;
}
</style>
</head>
<body>
<div class="div1">
添加用户:<br><br>
姓名：<input type="text" name="username" id="username">
email：<input type="text" name="email" id="email">
电话：<input type="text" name="tel" id="tel"><br><br>
<input type="submit" value="提交"><br><hr>
</div>
<center>
<div id="div2">
<table width="400px" border="1px" cellspacing="0px" id="tb">
<tr>
<td>姓名</td>
<td>email</td>
<td>tel</td>
<td>操作</td>
</tr>
</table>
</div>
</center>
<script type="text/javascript">
function del(){
alert("haha");
}
$("input[type=submit]").click(function(){
//var usernameValue = $("#username").attr("value");
var usernameValue = $("#username").val();
var emailValue = $("#email").val();
var telValue = $("#tel").val();
//var $trEle = $("<tr></tr>");//document.createElement();
var $trEle = $("<tr></tr>");
$trEle.html("<td>"+usernameValue+"</td><td>"+emailValue+"</td><td>"+telValue+"</td><td><a href='#' οnclick='del()'>delete</a></td>");
$("#tb").append($trEle);
});
</script>
</body>
</html>