纯js对table的增删改 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        tr,
        td,
        th {
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <div id="divfind">
        产品管理<input type="search"/>
    </div><br/>
    <table id="table" width="500" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>产品名称</th>
            <th>价格</th>
            <th>产地</th>
            <th>操作</th>
        </tr>
    </table>
    <div id="divInfo" style="width:500px;">
        <fieldset >
            <legend>商品详细</legend>
        <p>
            <label for="">编号:</label>
            <input type="text" class="inputs">
        </p>
        <p>
            <label for="">名称:</label>
            <input type="text" class="inputs">
        </p>
        <p>
            <label for="">价格:</label>
            <input type="text" class="inputs">
        </p>
        <p>
            <label for="">产地:</label>
            <input type="text" class="inputs">
        </p>
        <div style="display: flex;margin-left:80px;"> 
        <button onclick="update()">修改</button>
        <button onclick="add()">添加</button>
        </div>
        </fieldset>
    </div>
    <script>
        var user = new Set();
        user.add({ id: "101", name: "华为mate手机", price: 4599, chandi: "深圳" })
        user.add({ id: "102", name: "小米跑步机", price: 2999, chandi: "北京" })
        user.add({ id: "103", name: "九阳智能面条机", price: 1099, chandi: "上海" })
        user.add({ id: "104", name: "凯迪士指纹锁", price: 1999, chandi: "广州" })
        user.add({ id: "105", name: "海尔变频空调", price: 2895, chandi: "青岛" })


        // 创建tr/td节点
        var table = document.getElementById("table")
        function create(i) {
            let tr = document.createElement("tr")
            tr.classList.add("trs")
            let td1 = document.createElement("td")
            let td2 = document.createElement("td")
            let td3 = document.createElement("td")
            let td4 = document.createElement("td")
            let td5 = document.createElement("td")

            td1.innerHTML = i.id
            td2.innerHTML = i.name
            td3.innerHTML = i.price
            td4.innerHTML = i.chandi
            td5.innerHTML = `<button  onclick="bj()">编辑</button><button  onclick="del()">删除</button>`

            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            tr.appendChild(td4)
            tr.appendChild(td5)
            table.appendChild(tr)
        }

        duogonneng()


        // 删除
        function del() {
            duogonneng(1, event.srcElement.parentNode.parentNode.children[0].innerHTML)
        }

        // 编辑
        function bj() {
            document.getElementsByClassName("inputs")[0].value = event.srcElement.parentNode.parentNode.children[0].innerHTML
            document.getElementsByClassName("inputs")[1].value = event.srcElement.parentNode.parentNode.children[1].innerHTML
            document.getElementsByClassName("inputs")[2].value = event.srcElement.parentNode.parentNode.children[2].innerHTML
            document.getElementsByClassName("inputs")[3].value = event.srcElement.parentNode.parentNode.children[3].innerHTML
        }
        // 修改
        function update() {
            duogonneng(2, "", [
                document.getElementsByClassName("inputs")[0].value,
                document.getElementsByClassName("inputs")[1].value,
                document.getElementsByClassName("inputs")[2].value,
                document.getElementsByClassName("inputs")[3].value,
            ])
        }
        // 添加
        function add(){
            duogonneng(3,"",[
            document.getElementsByClassName("inputs")[0].value,
            document.getElementsByClassName("inputs")[1].value,
            document.getElementsByClassName("inputs")[2].value,
            document.getElementsByClassName("inputs")[3].value,
            ])
        }
        // 封装 crud
        function duogonneng(index, val, obj) {
            clear();
            clear();
            clear();
            if (index == 1) {
                for (let n of user) {
                    if (n.id == val) {
                        user.delete(n);
                    }
                }
            } else if (index == 2) {
                for (let u of user) {
                    if (u.id == obj[0]) {
                        u.name = obj[1];
                        u.price = obj[2];
                        u.chandi = obj[3];
                    }
                }
            }else if(index == 3){
                user.add({id:obj[0],name:obj[1],price:obj[2],chandi:obj[3]})
            }
            for (let n of user) {
                create(n)
            }
            clearinput()
        }


        // 清空
        function clear() {
            var trs = document.getElementsByClassName("trs")
            for (var n of trs) {
                n.remove()
            }
        }
        // 清空input
        function clearinput(){
            document.getElementsByClassName("inputs")[0].value=null
                document.getElementsByClassName("inputs")[1].value=null
                document.getElementsByClassName("inputs")[2].value=null
                document.getElementsByClassName("inputs")[3].value=null
        }
    </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        tr,
        td,
        th {
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <div id="divfind">
        产品管理<input type="search"/>
    </div><br/>
    <table id="table" width="500" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>产品名称</th>
            <th>价格</th>
            <th>产地</th>
            <th>操作</th>
        </tr>
    </table>
    <div id="divInfo" style="width:500px;">
        <fieldset >
            <legend>商品详细</legend>
        <p>
            <label for="">编号:</label>
            <input type="text" class="inputs">
        </p>
        <p>
            <label for="">名称:</label>
            <input type="text" class="inputs">
        </p>
        <p>
            <label for="">价格:</label>
            <input type="text" class="inputs">
        </p>
        <p>
            <label for="">产地:</label>
            <input type="text" class="inputs">
        </p>
        <div style="display: flex;margin-left:80px;">
        <button onclick="update()">修改</button>
        <button onclick="add()">添加</button>
        </div>
        </fieldset>
    </div>
    <script>
        var user = new Set();
        user.add({ id: "101", name: "华为mate手机", price: 4599, chandi: "深圳" })
        user.add({ id: "102", name: "小米跑步机", price: 2999, chandi: "北京" })
        user.add({ id: "103", name: "九阳智能面条机", price: 1099, chandi: "上海" })
        user.add({ id: "104", name: "凯迪士指纹锁", price: 1999, chandi: "广州" })
        user.add({ id: "105", name: "海尔变频空调", price: 2895, chandi: "青岛" })


        // 创建tr/td节点
        var table = document.getElementById("table")
        function create(i) {
            let tr = document.createElement("tr")
            tr.classList.add("trs")
            let td1 = document.createElement("td")
            let td2 = document.createElement("td")
            let td3 = document.createElement("td")
            let td4 = document.createElement("td")
            let td5 = document.createElement("td")

            td1.innerHTML = i.id
            td2.innerHTML = i.name
            td3.innerHTML = i.price
            td4.innerHTML = i.chandi
            td5.innerHTML = `<button  onclick="bj()">编辑</button><button  onclick="del()">删除</button>`

            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            tr.appendChild(td4)
            tr.appendChild(td5)
            table.appendChild(tr)
        }

        duogonneng()


        // 删除
        function del() {
            duogonneng(1, event.srcElement.parentNode.parentNode.children[0].innerHTML)
        }

        // 编辑
        function bj() {
            document.getElementsByClassName("inputs")[0].value = event.srcElement.parentNode.parentNode.children[0].innerHTML
            document.getElementsByClassName("inputs")[1].value = event.srcElement.parentNode.parentNode.children[1].innerHTML
            document.getElementsByClassName("inputs")[2].value = event.srcElement.parentNode.parentNode.children[2].innerHTML
            document.getElementsByClassName("inputs")[3].value = event.srcElement.parentNode.parentNode.children[3].innerHTML
        }
        // 修改
        function update() {
            duogonneng(2, "", [
                document.getElementsByClassName("inputs")[0].value,
                document.getElementsByClassName("inputs")[1].value,
                document.getElementsByClassName("inputs")[2].value,
                document.getElementsByClassName("inputs")[3].value,
            ])
        }
        // 添加
        function add(){
            duogonneng(3,"",[
            document.getElementsByClassName("inputs")[0].value,
            document.getElementsByClassName("inputs")[1].value,
            document.getElementsByClassName("inputs")[2].value,
            document.getElementsByClassName("inputs")[3].value,
            ])
        }
        // 封装 crud
        function duogonneng(index, val, obj) {
            clear();
            clear();
            clear();
            if (index == 1) {
                for (let n of user) {
                    if (n.id == val) {
                        user.delete(n);
                    }
                }
            } else if (index == 2) {
                for (let u of user) {
                    if (u.id == obj[0]) {
                        u.name = obj[1];
                        u.price = obj[2];
                        u.chandi = obj[3];
                    }
                }
            }else if(index == 3){
                user.add({id:obj[0],name:obj[1],price:obj[2],chandi:obj[3]})
            }
            for (let n of user) {
                create(n)
            }
            clearinput()
        }


        // 清空
        function clear() {
            var trs = document.getElementsByClassName("trs")
            for (var n of trs) {
                n.remove()
            }
        }
        // 清空input
        function clearinput(){
            document.getElementsByClassName("inputs")[0].value=null
                document.getElementsByClassName("inputs")[1].value=null
                document.getElementsByClassName("inputs")[2].value=null
                document.getElementsByClassName("inputs")[3].value=null
        }
    </script>
</body>

</html>
posted @ 2022-10-12 20:16  凡若沉曦＇  阅读(290)  评论(0)    收藏  举报
js脚本