<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>周末作业</title>
<style>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #616166;
opacity: 0.4;
z-index: 999;
}
.model {
600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button class="add">add</button>
<table border="2">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>hooby</th>
<th rowspan="2">operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>dance</td>
<td>
<button class="edit">edit</button>
<button class="delete">delete</button>
</td>
</tr>
<tr>
<td>2</td>
<td>yuanju</td>
<td>fucksky</td>
<td>
<button class="edit">edit</button>
<button class="delete">delete</button>
</td>
</tr>
<tr>
<td>3</td>
<td>alex</td>
<td>haircut</td>
<td>
<button class="edit">edit</button>
<button class="delete">delete</button>
</td>
</tr>
</tbody>
</table>
<div id="myCover" class="cover hide"></div>
<div id="myModel" class="model hide">
<label for="model-name">name</label>
<input id="model-name" type="text">
<label for="model-hobby">hobby</label>
<input id="model-hobby" type="text">
<button class="submit" id="model-submit">提交</button>
<button class="close" id="model-close">关闭</button>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
//show model
function showModel() {
$('#myCover,#myModel').removeClass('hide');
}
//close model
function closeModel() {
$('#myModel').find('input').val(''); //清空模态框中的input
$('#myCover,#myModel').addClass('hide');
}
//给新增绑定事件
$('.add').on('click', function () {
showModel();
});
//弹出模态框
//取消按钮
$('.close').on('click', function () {
//$('#myModel input').val(''); 效率低
closeModel();//隐藏模态框
});
//edit绑定
//需要使用事件委托 基于已经存在的元素（页面加载完后存在的标签）绑定事件
$('tbody').on('click','.edit', function () {
showModel();
//将原来的数据填写到模块框中的input
var $currentTrEle = $(this).parent().parent();
//将当前行jquery对象保存,用于判断提交是新增还是编辑下的模块框提交
$('#myModel').data('currentTr', $currentTrEle);
var name = $currentTrEle.children().eq(1).text();
var hobby = $currentTrEle.children().eq(2).text();
$('#model-name').val(name);
$('#model-hobby').val(hobby);
})
//模态框中的提交按钮绑定事件
$('#model-submit').on('click', function () {
//取到用户填写的input的值.
var name = $('#model-name').val();
var hobby = $('#model-hobby').val();
var $myModelEle = $('#myModel')
//根据编辑还是新增做不同的操作
//若编辑，根据先前编辑按钮的一行
//难点在于如何让确定先前编辑哪一行，利用data方法存具体的jquery对象
var $currentTrEle = $myModelEle.data('currentTr')
if ($currentTrEle !== undefined){
//edit状态
$currentTrEle.children().eq(1).text(name);
$currentTrEle.children().eq(2).text(hobby);
//清空之前保存的当前行
$myModelEle.removeData()
}else{
//创建TR标签，将得到的数据填写进去
var trEle = document.createElement('tr');
var number = $('tr').length
$(trEle).html(
'<td>' + number + '</td>' +
'<td>' + name + '</td>' +
'<td>' + hobby + '</td>' +
'<td><button class="edit">edit</button> <button class="delete">delete</button></td>'
);
//若新增，则生成一条新的tr，加到label最后
//添加数据到tbody中
$('tbody').append(trEle);
}
closeModel()
});
$('tbody').on('click','.delete',function () {
//删除点积删除按钮的当前行
var $currentTrEle = $(this).parent().parent();
//更新tbody序号
//找到当前行后所有的tr，依次更新序号
$currentTrEle.nextAll().each(function () {
//取到原来的序号
var oldnumber = $(this).children().first().text();
$(this).children().first().text(oldnumber-1) ;
$currentTrEle.remove();
})
})
</script>
</body>
</html>