先上效果图：
html代码如下：
代码语言：javascript复制<div class="box">
姓名 ：<input class="name" type="text" value="张韶涵" />
爱好 ： <input class="hobby" type="text" value="天使的翅膀" />
性别 ： <select class="sele">
<option value="男">男</option>
<option value="女">女</option>
</select>
<input class="add" type="button" value="添加" />
</div>
<table border="1" width="500">
<!-- 一对tr 代表一行 一对td 代表一个单元格-->
<tr>
<td>姓名</td>
<td>爱好</td>
<td>性别</td>
<td>删除</td>
</tr>
</table>jq代码如下：
代码语言：javascript复制// 增加信息 （增）
// 2. 放数据
// 添加点击事件
$(".add").on("click",function(){
//1.获取信息
var name = $(".name").val()
var hobby =$(".hobby").val()
var sex = $(".sele").val()
$("table").append(`<tr> <td>${name}</td> <td>${hobby}</td> <td>${sex}</td> <td> <button>删除 </button> </td> </tr>`)
//删除 （删）
$("table button").on("click",function(){
// remove() 删除
$(this).parent().parent().remove()
})
})主要实现了点击按钮添加数据 ， 点击删除删除本条数据
