js简易人员信息的增删改查

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapBox {
            width: 600px;
            margin: 50px auto;
            min-height: 500px;
            background-color: #FFCCCC;
        }

        .wrapBox button {
            padding: 5px;
            margin-bottom: 50px;
        }

        .wrapBox table {
            border-collapse: collapse;
            width: 100%;
            line-height: 30px;
            text-align: center;
            table-layout: fixed;
        }

        .wrapBox table,
        .wrapBox th,
        .wrapBox td {
            border: 1px solid #000;
        }

        /* 遮罩层 */
        .shadow {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .shadow .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #FF9999;
            padding: 20px;
            color: #fff;
        }

        .shadow .box p {
            margin: 10px 0;
        }
    </style>

<div class="wrapBox">
        <button class="add">新增</button>
        <table>
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody class="userlist">
            </tbody>
        </table>
    </div>
    <div class="shadow">
        <div class="box">
            <p><label for="user">用户名:</label><input id="user" type="text"></p>
            <p><label for="pwd">密&emsp;码:</label><input id="pwd" type="text"></p>
            <p>
                <input class="subBtn" type="submit" value="确定">
                <input class="cancelBtn" type="reset" value="取消">
            </p>
        </div>
    </div>
<script>
    // 1 获取元素
    var addBtn = getEle('.add');
    var conBtn = getEle('.subBtn');
    var canBtn = getEle('.cancelBtn');
    var shadow = getEle('.shadow');
    var inp1 = getEle('#user');
    var inp2 = getEle('#pwd');
    var tb = getEle('.userlist');
    // 新增状态
    var flag = 1;
    // 保存this值
    var _this = null;
    console.log(addBtn)

    // 2 绑定点击事件
    // 新增事件
    addBtn.onclick = function(){
        // 让弹窗显示
        shadow.style.display = 'block';
    }



    // 确定按钮事件
    conBtn.onclick = function(){
        if(flag){
            addInfo()
        } else {
            editInfo()
        }

    }

    function editInfo(){
        var unames = inp1.value;
        var upwds = inp2.value;
        shadow.style.display = 'none';
        inp1.value = '';
        inp2.value = '';
        console.log(_this)
        _this.previousSibling.previousSibling.innerHTML = unames;
        _this.previousSibling.innerHTML = upwds;
        flag = 1;
    }

    // 新增函数
    function addInfo(){
        var username = inp1.value;
        var userpwd = inp2.value;
        console.log(username,userpwd);
        // 让弹窗关闭
        shadow.style.display = 'none';
        inp1.value = '';
        inp2.value = '';

        // 创建tr标签
        var tr = document.createElement('tr');
        // 创建4个td

        // 创建第一个td
        var td1 = document.createElement('td');
        // 创建文本
        var txt1 = document.createTextNode(username);
        // 把文本追加到td里面去
        td1.appendChild(txt1)
        // 把td追加到tr中
        tr.appendChild(td1);

        // 创建第二个td
        var td2 = document.createElement('td');
        // 创建文本
        var txt2 = document.createTextNode(userpwd);
        // 把文本追加到td里面去
        td2.appendChild(txt2)
        // 把td追加到tr中
        tr.appendChild(td2);

        // 创建第三个td
        var td3 = document.createElement('td');
        // 创建文本
        var txt3 = document.createTextNode('编辑');
        // 把文本追加到td里面去
        td3.appendChild(txt3)
        // 把td追加到tr中
        tr.appendChild(td3);

        // 创建第四个td
        var td4 = document.createElement('td');
        // 创建文本
        var txt4 = document.createTextNode('删除');
        // 把文本追加到td里面去
        td4.appendChild(txt4)
        // 把td追加到tr中
        tr.appendChild(td4);

        tb.appendChild(tr)

        // 删除事件
        td4.onclick = function(){
            // remove删除自己
            this.parentNode.remove()
        }

        // 编辑事件
        td3.onclick = function(){
            // 让弹窗显示
            shadow.style.display = 'block';
            var uname = this.previousSibling.previousSibling.innerHTML;
            var upwd = this.previousSibling.innerHTML;
            console.log(uname)
            inp1.value = uname;
            inp2.value = upwd;
            // 点了编辑之后flag就变成编辑状态
            flag = 0;
            console.log(this)
            // 保存this
            _this = this;
        }
    }


    // 取消按钮事件
    canBtn.onclick = function(){
        // 让弹窗关闭
        shadow.style.display = 'none';
        inp1.value = '';
        inp2.value = '';
        // 取消时，要还原成新增状态
        flag = 1;
    }


    // 获取单个元素
    function getEle(ele){
        return document.querySelector(ele)
    }


    
</script>