<!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 {
            width: 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>