标签：arr javaScript inp faIndex value var 增删 document

//声明变量

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);
}

标签：arr,javaScript,inp,faIndex,value,var,增删,document
来源： https://blog.csdn.net/xiangfeng153/article/details/120470528

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。