不能重复ID和电话

CSS部分

 <style>
        table {
            width: 600px;
            border: 1px solid #000;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0px;
            text-align: center;

        }

        tr,
        th,
        td {
            border: 1px solid #000;
        }

        tbody input {
            width: 90%;
            border: none;
            outline: none;
        }

        input {
            outline: none;
        }
    </style>

html部分

<div>
        <p><input type="text" id="sId" placeholder="ID"></p>
        <p><input type="text" id="sName" placeholder="姓名"></p>
        <p><input type="text" id="sTel" placeholder="电话"></p>
        <p><button id="save">保存</button></p>
        <input type="text" id="txt">
        <button id="search">搜索</button>

        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>电话</th>
                    <th>姓名</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tab"></tbody>
        </table>
    </div>

JavaScript部分

<script>
        var oId = document.getElementById("sId");//ID
        var oName = document.getElementById("sName");//姓名
        var oTel = document.getElementById("sTel");//绑定电话

        var oTxt = document.getElementById("txt");//绑定search输入框
        var oSearch = document.getElementById("search");//search按钮

        var oSave = document.getElementById("save");//保存按钮
        var oTab = document.getElementById("tab");//表格


        //1.模拟一些初始数据,用来对比防止重复
        var data = [{
            id: 1,
            name: "刘德华",
            tel: 17485247895
        },
        {
            id: 2,
            name: "周星驰",
            tel: 17485247295
        }]
        //调用加载显示存储在data对象里面的函数
        loadData(data);
        //2.点击保存按钮,输入框的数据,做成一个对象,
        // 把该对象添加到模拟数据里
        oSave.onclick = function () {
            var obj = {
                id: oId.value,
                name: oName.value,
                tel: oTel.value
            }
            //在保存的时候,拿 obj里的id与 模拟数据里的id继续比较
            //id与电话号码不能重复
            var isReg = data.some(function (item) {
                return item.id == obj.id || item.tel == obj.tel;
            })
            //判断isReg
            if (isReg) {
                return;
            }
            data.push(obj);
            loadData(data);
        }
        //3.把加载的数据显示出来
        function loadData(arr) {
            //判断输入的数据是否为数组格式
            if (!Array.isArray(arr)) {
                return;
            }
            var strHtml = "";
            arr.forEach(function (item) {
                strHtml += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.tel}</td>
                    <td>
                        <a href="javascript:void(0)" onclick=del(this,${item.id})>删除</a>
                        <a href="javascript:void(0)" onclick=edit(this,${item.id})>编辑</a>
                        <a href="javascript:void(0)" style="display:none" onclick=save(this,${item.id})>保存</a>
                        
                    </td>
                `
            });
            oTab.innerHTML = strHtml;
        }
        //4.定义删除函数
        function del(o, id) {
            //1.//1.先根据id找出模拟数据里的 对应数据
            var findIndex = -1;
            data.forEach(function (item, index) {
                if (item.id == id) {
                    findIndex = index;
                }
            })
            //根据下标删除
            data.splice(findIndex, 1);
            //删除页面结构tr
            o.parentNode.parentNode.remove();
        }
        //5.定义一个搜索功能
        oSearch.onclick = function () {
            //1.先获取到搜索输入框的值
            var strName = oTxt.value;
            //2.拿strName 与模拟的数据,进行过滤
            var newData = data.filter(function (item) {
                return item.name.indexOf(strName) != -1;
            })
            //加载显示的数据,innerHTML会覆盖之前的数据
            loadData(newData)
        }
        //6.定义一个编辑功能 函数
        function edit(o, id) {
            o.style.display = "none";
            //edit的a标签下一个标签保存显示出来,加上括号就不用重新定义一个对象赋值
            (o.nextElementSibling || o.nextSibling).style.display="inline-block";
             // 拿到用户名的td里头 插入一个input
            //先取值 刘德华
            var strName=o.parentNode.parentNode.children[1].innerText;
            //把刘德华放入到一个 输入框里,在把输入框插入到 第2个td里
            o.parentNode.parentNode.children[1].innerHTML=`<input value=${strName}>`;

            //取出电话号码
            var strTel=o.parentNode.parentNode.children[2].innerText;
            o.parentNode.parentNode.children[2].innerHTML=`<input value=${strTel}>`;
        }

        //保存 功能函数定义
        function save(o,id){
            o.style.display="none";//save的a隐藏
            //edit的a显示
            (o.previousElementSibling||o.previousSibling).style.display="inline-block";
            // 1.根据id找到下标,在于对应下标的地方,把输入的值,覆盖模拟数据里某对象的数据
            var findIndex=-1;
            data.forEach(function(item,index){
                if(item.id==id){
                    findIndex=index;
                }
            })
            data[findIndex].name=o.parentNode.parentNode.children[1].children[0].value;
            data[findIndex].tel=o.parentNode.parentNode.children[2].children[0].value;
            //把输入的内容,利用innerHTML 覆盖原来的 input框
            o.parentNode.parentNode.children[1].innerHTML=data[findIndex].name;
            o.parentNode.parentNode.children[2].innerHTML=data[findIndex].tel;
        }

    </script>