Javascript----增删改查

Posted 2020-09-30 SunLike阿理旺旺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript----增删改查相关的知识，希望对你有一定的参考价值。
一、代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .edit-form {
        height: 40px;
        line-height: 40px;
    }
    </style>
</head>

<body>
    <!--
      假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
    -->
    <button class="add">添加一条新的访客信息</button>
    <button class="del">删除选中</button>
    <button class="up-sort">从小到大</button>
    <button class="down-sort">从大到小</button>
    <div class=\'edit-form\'>
        <label>
            <span>姓名：</span>
            <input type="text" name="name" class=\'edit-name\' id=\'edit-name\'>
        </label>
        <label>
            <span>年龄：</span>
            <input type="text" name="name" class=\'edit-age\' id=\'edit-age\'>
        </label>
        <button class=\'sure-edit-btn\' id=\'sure-edit-btn\'>确定</button>
    </div>
    <table border="1" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
        <tbody id=\'container\'>
        </tbody>
    </table>
    <script type="text/javascript">
    var info = [
        { name: "胡杭", age: 16 },
        { name: "胜明", age: 22 },
        { name: "军毅", age: 21 },
        { name: "晓华", age: 13 },
        { name: "盛聪", age: 23 },
        { name: "侦剑", age: 32 },
        { name: "红翔", age: 25 },
        { name: "超维", age: 18 },
        { name: "士琪", age: 22 },
        { name: "艳华", age: 20 }
    ];
    var arr = info;
    var addBtn = document.querySelector(".add");
    var delBtn = document.querySelector(".del");
    var upSortBtn = document.querySelector(".up-sort");
    var downSortBtn = document.querySelector(".down-sort");
    var deleteSigleBtn = document.getElementsByClassName("del-single");
    var nameVal = document.getElementById("edit-name");
    var ageVal = document.getElementById("edit-age");
    var sureEditBtn = document.getElementById("sure-edit-btn");
    var container = document.getElementById("container");
    var index = 0;
    var nowArr = [];
    var delArray = [];
    var editUserName = \'\';
    //添加一条心的访客信息
    addBtn.addEventListener("click", function() {
        if (index < info.length) {
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
            var user = info[index];
            nowArr.push(user);
            console.log(nowArr.length);
            index++;
            for (var i = 0; i < nowArr.length; i++) {
                fillList(nowArr[i], i);
            }
        } else {
            alert("已加载完信息！");
        }
    })
    //删除选中
    delBtn.addEventListener("click", function() {
        var choose = document.getElementsByClassName(\'choose\');
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }
        for (var i = 0; i < delArray.length; i++) {
            delArr(delArray[i]);
        }
        for (var i = 0; i < nowArr.length; i++) {
            fillList(nowArr[i], i);
        }
    })
    //从大到小排序
    upSortBtn.addEventListener("click", function() {
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }
        sortArr(nowArr, 1)
        for (var i = 0; i < nowArr.length; i++) {
            /* var index = i;*/
            fillList(nowArr[i], i);
        }
    })
    // 从大到小排序
    downSortBtn.addEventListener("click", function() {
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }
        sortArr(nowArr, 2)
        for (var i = 0; i < nowArr.length; i++) {
            /* var index = i;*/
            fillList(nowArr[i], i);
        }
    })
    //确认修改
    sureEditBtn.addEventListener("click", function() {
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }


        var name1 = document.getElementById("edit-name").value;
        var age1 = document.getElementById("edit-age").value;

        for (var i = 0; i < nowArr.length; i++) {
            if (nowArr[i].name == editUserName) {
                nowArr[i].name = name1;
                nowArr[i].age = age1;
                editUserName = name1;
            }
        }

        console.log(nowArr);

        for (var i = 0; i < nowArr.length; i++) {
            /* var index = i;*/
            fillList(nowArr[i], i);
        }
    })






    //填充列表
    function fillList(user, index1) {
        var user = user;

        var trList = document.createElement("tr");
        trList.setAttribute("class", "mes-list");
        var tdNum = document.createElement("td");
        tdNum.innerText = (index1 + 1);
        trList.appendChild(tdNum);

        var tdName = document.createElement("td");
        tdName.innerText = user.name;
        trList.appendChild(tdName);
        var tdAge = document.createElement("td");
        tdAge.innerText = user.age;
        trList.appendChild(tdAge);

        var tdOpt = document.createElement("td");
        var del = document.createElement("button");
        del.innerText = "删除";
        del.setAttribute("class", "del-single");
        del.setAttribute("data-name", user.name);
        del.setAttribute("data-age", user.age);
        tdOpt.appendChild(del);
        trList.appendChild(tdOpt);

        var edit = document.createElement("button");
        edit.innerText = "修改";
        edit.setAttribute("class", "edit-user-name");
        edit.setAttribute("data-name", user.name);
        edit.setAttribute("data-age", user.age);
        tdOpt.appendChild(edit);
        trList.appendChild(tdOpt);

        var tdOpt = document.createElement("td");
        var checkBox = document.createElement("input");
        checkBox.setAttribute("type", "checkbox");
        checkBox.setAttribute("class", "choose");
        checkBox.setAttribute("data-name", user.name);
        tdOpt.appendChild(checkBox);
        trList.appendChild(tdOpt);

        container.appendChild(trList);
    }



    //删除单个访客信息按钮
    container.addEventListener("click", function(ev) {
        var target = ev.target;
        if (target.getAttribute("class") == "del-single") {
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
            var userName = target.getAttribute("data-name");
            delArr(userName);
            for (var i = 0; i < nowArr.length; i++) {
                fillList(nowArr[i], i);
            }
        }
    })


    //修改按钮事件
    container.addEventListener("click", function(event) {
        event.stopPropagation();

        var ev = event;
        var target = ev.target;
        console.log(target);
        if (target.getAttribute("class") == "edit-user-name") {
            var name = target.getAttribute("data-name");
            var age = target.getAttribute("data-age");

            /*console.log(name+":"+age);*/
            nameVal.value = name;
            ageVal.value = age;
            editUserName = name;


        }
    })


    //选择框事件
    container.addEventListener("click", function(ev) {
        var target = ev.target;
        if (target.getAttribute("type") == "checkbox") {
            var status = target.checked;
            var userName = target.getAttribute("data-name");
            if (status == true) {
                /*delArr(userName);*/
                delArray.push(userName);
            } else {
                for (var i = 0; i < delArray.length; i++) {
                    if (delArray[i].name == userName) {
                        delArray.splice(i, 1);
                    }
                }
            }
        }
    })







    // 数组排序
    function sortArr(arr, t) {
        var a = arr;
        if (t == 1) {
            for (var i = 0; i < a.length; i++) {
                for (var j = i + 1; j < a.length; j++) {
                    /* console.log(a[i].age+","+a[j].age);*/
                    if (parseInt(a[i].age) > parseInt(a[j].age)) {
                        var t = a[j];
                        a[j] = a[i];
                        a[i] = t;
                    }
                }
            }
        } else {
            for (var i = 0; i < a.length; i++) {
                for (var j = i + 1; j < a.length; j++) {
                    /* console.log(a[i].age+","+a[j].age)*/
                    if (parseInt(a[i].age) < parseInt(a[j].age)) {
                        var t = a[j];
                        a[j] = a[i];
                        a[i] = t;
                    }
                }
            }
        }
        return a;
    }



    //删除数组元素
    function delArr(name) {
        /*console.log(name+nowArr.length);*/
        for (var i = 0; i < nowArr.length; i++) {
            if (nowArr[i].name == name) {
                nowArr.splice(i, 1);
            }
        }
        return nowArr;
    }
    </script>
</body>

</html>
二、效果图
3、总结：
原生的javascript不熟悉，dom操作不顺手，继续打js基础。
以上是关于Javascript----增删改查的主要内容，如果未能解决你的问题，请参考以下文章
Javascript----增删改查
JavaScript数组：增删改查排序等
JavaScript 索引关联对象数组增删改查循环
增删改查项目属于前端还是后端
javaScript增删改查(转)
javascript json对象操作（基本增删改查）