Js实现简易的增删改查

Js实现简易的增删改查

用JavaScript实现简单增删改查工作，这个应该是多数Js初学者都比较棘手的一个问题
在下面我给大家写了一个简单的案例，该案例中没有实现增加操作，大家可以自己探索一下

html结构

在结构这里我们就是用一个表格简单的实现一下
下面的div是为了方便我们实现显示与隐藏，所以单独设置了一个div

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>jon1</td>
                <td>15239111596</td>
                <td>
                    <button class="del">删除</button>
                    <button class="ref">修改</button>
                </td>
            </tr>
            <tr>
                <td>jon2</td>
                <td>13223009270</td>
                <td>
                    <button class="del">删除</button>
                    <button class="ref">修改</button>
                </td>
            </tr>
            <tr>
                <td>jon3</td>
                <td>15093773181</td>
                <td>
                    <button class="del">删除</button>
                    <button class="ref">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
    <div id="content">
        <input type="text">
        <input type="text">
        <button class="confirm">确认修改</button>
        <button class="cancel">取消</button>
    </div>

CSS样式

样式这块没有什么好特别嘱咐的，自己按需要设置就可以

*{
            margin: 0;
            padding: 0;
            outline: none;
        }
        table{
            width: 600px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #333333;
            /*合并表格边框属性*/
            border-collapse: collapse;
        }
        td,th{
            height: 40px;
            border: 1px solid #333333;
        }
        div{
            width: 600px;
            margin: 20px auto;
            /*默认条件下div隐藏*/
            display: none;
        }

JavaScript逻辑

逻辑这一块具体实现过程每一步，我都做了注释，方便大家阅读，在这里就不在一一阐述

var TB = document.getElementsByTagName('tbody')[0];
    var myContent = document.getElementById('content');
    
    // 给tbody绑定点击事件（事件委托）
    TB.onclick = function (e) {
        // 如果当前点击的是删除按钮
        if (e.target.className == 'del') {
            // 弹出一个询问框，并用x接收返回值 ----  
            // 询问框返回值只有两个  点击确认：true  点击取消：false
            var x = confirm('确认删除吗？');
            // 如果x值为真，即点击了确认，删除所在行
            if (x) { 
                // e.target 为当前点击对象--->删除按钮
                // e.target.parentElement ---> td 
                // e.target.parentElement.parentElement  ---> tr
                TB.removeChild(e.target.parentElement.parentElement);
            }else{
                TB.removeChild();
            }
        }
        // 如果当前点击的是修改按钮
        if(e.target.className == 'ref'){
            // 下面的div要显示出来
            myContent.style.display = "block";
            // 给每一个输入框赋初始值
            /* 
                这是让 myContent.children[0] 第一个输入框的value（输入框中显示的字为姓名）
                e.target.parentElement.parentElement  ---> tr
                e.target.parentElement.parentElement.children[0]  --->  tr的第一个子节点，即姓名所在的td
             */
            myContent.children[0].value = e.target.parentElement.parentElement.children[0].innerText;
            // 这与第一个原理如出一辙
            myContent.children[1].value = e.target.parentElement.parentElement.children[1].innerText;

            // 给div绑定点击事件（事件委托），这里形参用ev是为了区别上面的e
            myContent.onclick = function(ev){
                // 如果点击的是确认修改
                if (ev.target.className == 'confirm') {
                    // 下面的div要隐藏起来
                    myContent.style.display = "none";
                    // 点击了确认修改就把文本框的value值赋值给对应td的文本
                    e.target.parentElement.parentElement.children[0].innerText =  myContent.children[0].value;
                    e.target.parentElement.parentElement.children[1].innerText =  myContent.children[1].value;
                }
                // 如果点击的是取消，下面的div同样要隐藏，之所以这样写，是因为只有点击这两个按钮才会执行隐藏操作
                if (ev.target.className == 'cancel') {
                    myContent.style.display = "none";
                }
            }
        }
    }

点击删除按钮时的效果

在弹出框点击确认后

在弹出框点击取消后

点击修改按钮

在第二个文本框修改后，点击确认修改