javaScript增删改

本文主要是介绍javaScript增删改，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

//声明变量

var search = document.querySelector(".search");
var inp = document.querySelectorAll(".boss input");
var btn = document.querySelector(".btn");
var box = document.querySelector(".box");
var searchInpt = document.querySelector(".search-inpt");
var searchBtn = document.querySelector(".search-btn");

var arr = [];
var bol = true;

 //查询

function fun() {
    var inputs = document.querySelector(".search-inpt");
    var btns = document.querySelector(".search-btn");
    var boxs = document.querySelectorAll("tr")

    btns.addEventListener("click", function() {
        for (var i = 1; i < boxs.length; i++) {
            boxs[i].style.display = "none";
            if (inputs.value == boxs[i].children[4].innerHTML) {
                boxs[i].style.display = "";
            }
        }
    })
    inputs.addEventListener("blur", function() {
        for (var j = 0; j < boxs.length; j++) {
            if (inputs.value == "" || inputs.value == null || inputs.value == undefined) {
                boxs[j].removeAttribute("style");
            }
        }
    })
}

//添加

btn.onclick = function() {
    if (!bol) {
        console.log("这是编辑进来的")
        var strDemo = {
            name: inp[0].value,
            age: inp[1].value,
            sex: inp[2].value,
            id: inp[3].value
        }

        for (var i = 0; i < inp.length; i++) {
            if (inp[i].value == "" || inp[i].value == null || inp[i].value == undefined) {
                alert("请完善内容！");
                return false;
            }
        }

        if (arr.length > 0) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].id == strDemo.id) {
                    alert("学号不能重复！");
                    return false;
                }
            }
            arr.push(strDemo);
        } else {
            arr.push(strDemo);
        }

    } else {
        var strDemo = {
            name: inp[0].value,
            age: inp[1].value,
            sex: inp[2].value,
            id: inp[3].value
        }
        for (var i = 0; i < inp.length; i++) {
            if (inp[i].value == "" || inp[i].value == null || inp[i].value == undefined) {
                alert("请完善内容！");
                return false;
            }
        }

        if (arr.length > 0) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].id == strDemo.id) {
                    alert("学号不能重复！");
                    return false;
                }
            }
            arr.push(strDemo);
        } else {
            arr.push(strDemo);
        }
        var trs = document.createElement("tr");
        box.appendChild(trs);
        var xh = document.createElement("td");
        xh.innerHTML = arr.length;
        trs.appendChild(xh);
        for (var i = 0; i < inp.length; i++) {
            var tds = document.createElement("td");
            tds.innerHTML = inp[i].value;
            trs.appendChild(tds);
        }
        var del = document.createElement("td");
        del.innerHTML = "<button class='dels' onclick='dels()'>删除</button>";
        trs.appendChild(del);
        var del = document.createElement("td");
        del.innerHTML =
            "<button class='box3' onclick='edit()'>编辑</button><button class='box2' onclick='updat()' style='display: none;'>更新</button>";
        trs.appendChild(del);

        cleNull();
        fun();


        for (var i = 0; i < arr.length; i++) {
            if (arr[i].id == inp[3].value) {
                arr[i].name = inp[0].value;
                arr[i].age = inp[1].value;
                arr[i].sex = inp[2].value;
                arr[i].id = inp[3].value;
            }
        }
    }
}

//编辑

var trsing = document.querySelectorAll("td");

function edit(e) {
    bol = false;
    // console.log("编辑");
    var faIndex = event.target.parentNode.parentNode;
    for (var i = 1; i < 5; i++) {
        var inputs = document.createElement("input");
        inputs.setAttribute("type", "text");
        inputs.setAttribute("class", "inputing");
        inputs.style.width = "50%";
        inputs.value = faIndex.children[i].innerHTML;
        faIndex.children[i].innerHTML = "";
        faIndex.children[i].appendChild(inputs);
    }
    // box2是更新，box3是更新
    var box2 = faIndex.querySelector(".box2");
    var box3 = faIndex.querySelector(".box3");
    box2.style.display = "inline-block";
    box3.style.display = "none";
    for (var i = 0; i < 4; i++) {
        inped[i].value = faIndex.children[i + 1].children[0].value;
    }
}
var inped = document.querySelectorAll(".boss input");
// 清空左边输入数据
function cleNull() {
    for (var i = 0; i < 4; i++) {
        inped[i].value = "";
        inped[i].removeAttribute("display");
    }
}
// 点击编辑后更新按钮
function updat(e) {
    var faIndex = event.target.parentNode.parentNode;
    var inputing = faIndex.querySelectorAll(".inputing");
    for (var i = 1; i < 5; i++) {
        faIndex.children[i].innerHTML = inputing[i - 1].value;
    }
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].id == faIndex.children[4].innerHTML) {
            arr[i].name = inputing[0].value;
            arr[i].age = inputing[1].value;
            arr[i].sex = inputing[2].value;
            arr[i].id = inputing[3].value;
        }
    }
    // JSON.stringify()字符串转对象
    // console.log("arr"+JSON.stringify(arr));
    // box2是更新，box3是更新
    var box2 = faIndex.querySelector(".box2");
    var box3 = faIndex.querySelector(".box3");
    box3.style.display = "inline-block";
    box2.style.display = "none";
}

//删除

function dels(e) {
    var faIndex = event.target.parentNode.parentNode;
    faIndex.remove();
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].id == faIndex.children[4].innerHTML) {
            arr.splice(i, 1);
        }
    }
    px();
    // console.log(arr);
}

这篇关于javaScript增删改的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！