首页 > 其他分享 >纯js对table的增删改

纯js对table的增删改

时间：2022-10-12 20:36:18浏览次数：43  
标签：inputs getElementsByClassName tr value js user 增删 table document 

<!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>

标签：inputs,getElementsByClassName,tr,value,js,user,增删,table,document
From： https://www.cnblogs.com/Ryan-DHQ/p/16785838.html

相关文章

  • 一款纯 JS 实现的轻量化图片编辑器
    介绍因为一些特点的工作场景,写文章的需要每次处理一些图片,在上面加说明文字,或者加一些图形刚开始使用PPT来处理,一张张复制过去,做一些边框阴影处理,再加一些......
  • json操作 - 对象和json字符串 互转 JavaScript
    json操作-对象和json字符串互转JavaScript?12345678910111213141516171819<script>    //json数据转换    vardata={        name:'小明',......
  • C#中使用Newtonsoft.Json序列化和反序列化自定义类对象
    C#中使用Newtonsoft.Json序列化和反序列化自定义类对象在C#中序列化和反序列化自定义的类对象是比较容易的，比如像下面的一个Customer类，privateclassCustomer{......
  • ABAPCDSTableFunction介绍与示例
    ABAPCDSTableFunction在ABAPCDSTableFunction的开发过程中，我们将字段结构、参数（可选）、association等通过类/方法定义为实体。通过AMDP我们可以直接在ABAP层写存储过程......
  • [python] JSON
    [python]JSONJSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式。JSON的数据格式其实就是python里面的字典格式，里面可以包含方括号括起来的数......
  • es5 JSON对象
    es5JSON对象1.JSON.stringify(obj/arr)js对象(数组)转换为json对象(数组)2.JSON.parse(json)json对象(数组)转换为js对象(数组)<!DOCTYPEhtml><htmllang="en"......
  • json python
    jsonpython阅读目录序列化模块json模块回到顶部序列化模块1，定义序列化：就是将一种数据结构（如字典，裂变）等转换成一个特殊的序列（字符串或者bytes）的过程就叫序列化序列化......
  • mysql存储json
    mysql存储json  1.json_merge合并Json并返回 ?1update`user`setinviteeMap=json_merge(inviteeMap,'{"xx1":100}')    where`account`='100089'......
  • 微信weixin-js-sdk（开放能力-微信开放标签）
    https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html   http://t.zoukankan.com/Can-daydayup-p-15404964.html  最后排查......
  • Vue10货物增删改查
    序实现简单的增删改查案例实现效果源码<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <style> th{ background-color:......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99