<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
td {
width: 100px;
}
</style>
</head>
<body>
<div id="reg-input" style="margin-bottom:10px;">
ID: <input type="text" id="user-id" />
姓名: <input type="text" id="user-name" />
电话: <input type="text" id="user-tel" />
<button id="save">保存</button>
</div>
<table border="1" id="info-tbl">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三丰</td>
<td>13312345678</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四疯</td>
<td>13388888888</td>
<td><a href="#" class="del">删除</a></td>
</tr>
</tbody>
</table>
<script src="./lib/jquery-3.4.1.min.js"></script>
<script>
function save(){
$('button').on('click',function(){
var $tr=$('<tr></tr>')
var $td_id=$('<td></td>')
$td_id.html($('#user-id').val())
var $td_name=$('<td></td>')
$td_name.html( $('#user-name').val())
var $td_tel=$('<td></td>')
$td_tel.html($('#user-tel').val())
var $td_remove=$('<td></td>')
$td_remove.html('<a href="#" class="del">删除</a>')
$td_id.appendTo($tr)
$td_name.appendTo($tr)
$td_tel.appendTo($tr)
$td_remove.appendTo($tr)
$tr.appendTo($('tbody'))
removeTR()
})
}
save()
function removeTR(){
$('a').on('click',function(){
$(this).parent().parent().empty()
})
}
removeTR()
</script>
</body>
</html>