效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#install{
display: none;
}
#save,#cancel{
100px;
height: 30px;
}
.add{
margin:10px 10px;
}
.add span{
margin:10px 10px;
}
</style>
</head>
<body>
<input type="button" id="add_btn" value="添加" />
<table border="" cellspacing="" cellpadding="">
<tr>
<th>编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>华为</td>
<td>￥2000</td>
<td>描述1</td>
<td>
<a href="#">编辑</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>华为</td>
<td>￥2000</td>
<td>描述2</td>
<td>
<a href="#">编辑</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>华为</td>
<td>￥2000</td>
<td>描述3</td>
<td>
<a href="#">编辑</a>|<a href="#">删除</a>
</td>
</tr>
</table>
<div id="install">
<div class="add">
<h1>操作</h1>
</div>
<div class="add"><span>名称</span><input type="text" class="name" /></div>
<div class="add"><span>价格</span><input type="text" class="price" /></div>
<div class="add"><span>描述</span><input type="text" class="describe" /></div>
<div class="add">
<input type="button" id="save" value="保存" />
<input type="button" id="cancel" value="取消" />
</div>
</div>
<script type="text/javascript">
//修改完列表内容需要给号码排序
function loop () {
var num = $('tr td').length;
console.log(num)
for (var i=0;i<num;i+=5) {
$('tr td').eq(i).text(i/5+1);
}
}
//添加事件
$('#add_btn').click(function () {
$('#install').show();
type='tianjia';
});
//记录是第几个修改的结点
var select;
//记录当前的结点
var node;
//记录是修改是添加
var type;
//删除和修改
$('tr td a').click(function() {
// console.log(this.text())
//找节点删除
if($(this).text() == '删除') {
$(this).parent().parent().remove();
//记得循环前面的列表号
loop();
} else {
//给修改的时候赋值
select=$(this).parent().prev().prev().prev().prev().text()
node=$(this);
$('#install').show();
console.log(select)
$('.name').val($(this).parent().prev().prev().prev().text())
$('.price').val($(this).parent().prev().prev().text())
$('.describe').val($(this).parent().prev().text())
type = 'xiugai';
}
// this.parent().remove();
})
$("#save").click(function () {
if(type=='xiugai'){
//修改的时候赋值
node.parent().prev().prev().text($('.name').val())
node.parent(). prev().prev().text($('.price').val())
node.parent() .prev().text($('.describe').val())
alert('保存成功')
//修改完清空
$('.name').val('')
$('.price').val('')
$('.describe').val('')
$('#install').hide();
}else{
//创建所需结点
var tr_ = $('<tr></tr>');
var td_num = $('<td></td>');
var td_name = $('<td></td>');
var td_price = $('<td></td>');
var td_describe = $('<td></td>');
var td_a = $('<td><a href="#">编辑</a>|<a href="#">删除</a></td>');
var num = $('tr td').length;
//给节点赋值
td_num.text(num);
td_name.text($('.name').val())
td_price.text($('.price').val());
td_describe.text($('.describe').val());
//结点进行结构构造
tr_.append(td_num);
tr_.append(td_name);
tr_.append(td_price);
tr_.append(td_describe);
tr_.append(td_a);
//给table表插入数据
$('table').last().append(tr_);
}
loop();
})
//点取消按钮清空添加表
$("#cancel").click(function () {
$('.name').val('')
$('.price').val('')
$('.describe').val('')
$('#install').hide();
})
</script>
</body>
</html>