• js新增、删除table和table中input


    实际效果:点击添加按钮添加新的一行,在行内可对数据进行编辑和删除

    源代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
     <style type="text/css">
        table, th, td
        {
            border: 1px solid black;
        }
            
    </style>
    </head>
    <body>
    <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-2"><button type="button" class="btn btn-block btn-primary" onclick="addtmpParam();">添加</button></div>
                        </div>
                        <div class="row" style="margin-top:10px;">
                            <div id="tblServiceList-div" style=" 100%;">
                                <table class="table table-bordered" id="interfaceParam">
                                    <thead>
                                        <tr>
                                            <td>序号</td>
                                            <td>名称</td>
                                            <td>编号</td>
                                            <td>字段类型</td>
                                            <td>默认值</td>
                                            <td>操作</td>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
     </body>
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
     <script>
        function addtmpParam() {
            var Table = document.getElementById("interfaceParam");
            var rowsNum = Table.rows.length-1;
            NewRow = Table.insertRow(); //添加行
            ID = NewRow.insertCell(); //添加列
            Name = NewRow.insertCell();
            NO = NewRow.insertCell();
            Type = NewRow.insertCell();
            defaultV = NewRow.insertCell();
            operate = NewRow.insertCell();
            //属性赋值
            ID.innerHTML = rowsNum + 1;
            Name.innerHTML = "<input id=Name" + (rowsNum + 1)+" style=' 80px;' type='text' />";
            NO.innerHTML = "<input id=No" +  (rowsNum + 1) +"  style=' 80px;' type='text' />";
            Type.innerHTML = "<input id=Type" + (rowsNum + 1) +"  style=' 80px;' type='text' />";
            defaultV.innerHTML = "<input id=defaultV" + (rowsNum + 1) +"  style=' 80px;' type='text' />";
            operate.innerHTML = '<div id=operate' + (rowsNum + 1) + '><a style="cursor:pointer;color:#007bff;"  onclick="saveInterfaceParam();">保存</a>&nbsp;&nbsp;<a style="cursor:pointer;color:#007bff;"  onclick="saveInterfaceParam();">取消</a></div>';
        }
    
        function saveInterfaceParam() {
            var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td
            //获取行索引,修改input样式,其中parentElement和table中的标签层级相关,不是一成不变
            var key = td.parentElement.parentElement.parentElement.innerText.split("
    ")[0].trim();
            $("#Name" + key).attr("disabled", true);
            $("#No" + key).attr("disabled", true);
            $("#Type" + key).attr("disabled", true);
            $("#defaultV" + key).attr("disabled", true);
            var div1 = $("#operate" + key);
            div1[0].innerHTML = '<a style="cursor:pointer;color:#007bff;"  onclick="editInterfaceParam()">编辑</a>&nbsp;&nbsp;<a style="cursor:pointer;color:#007bff;"  onclick="deleteInterfaceParam()">删除</a>';
        }
    
        function editInterfaceParam() {
            var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td
            var key = td.parentElement.parentElement.parentElement.innerText.split("
    ")[0].trim();
            $("#Name" + key).attr("disabled", false);
            $("#No" + key).attr("disabled", false);
            $("#Type" + key).attr("disabled", false);
            $("#defaultV" + key).attr("disabled", false);
            var div1 = $("#operate" + key);
            div1[0].innerHTML = '<a style="cursor:pointer;color:#007bff;"  onclick="saveInterfaceParam();">保存</a>&nbsp;&nbsp;<a style="cursor:pointer;color:#007bff;"  onclick="saveInterfaceParam();">取消</a>';
        }
    
        function deleteInterfaceParam() {
            var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td
            var key = td.parentElement.parentElement.parentNode.rowIndex;  //获取行索引
            document.getElementById('interfaceParam').deleteRow(key); //删除
    
            //以下操作是保存删除数据后table中序号重新生成且有序
            var table = document.getElementById("interfaceParam");
            var tableRows = table.rows;
            //保存剩余表中数据到RowArr
            var RowArr = new Array();
            for (var i = 1; i < tableRows.length; i++) {
                var arr = new Array();
                var tempKey = tableRows[i].cells[0].innerText;
                arr.push($("#Name" + tempKey).val());
                arr.push($("#No" + tempKey).val());
                arr.push($("#Type" + tempKey).val());
                arr.push($("#defaultV" + tempKey).val());
                RowArr.push(arr);
            }
            //删除表中数据
            if (table !== "undefined") {
                while (table.hasChildNodes()) {
                    table.removeChild(table.lastChild)
                }
            }
            //重新生成表数据
            for (var i = 0; i < RowArr.length+1;i++) {
                if (i == 0) {
                    //生成表头
                    NewRow = table.insertRow(); //添加行
                    ID = NewRow.insertCell(); //添加列
                    Name = NewRow.insertCell();
                    NO = NewRow.insertCell();
                    Type = NewRow.insertCell();
                    defaultV = NewRow.insertCell();
                    operate = NewRow.insertCell();
                    ID.innerHTML = "序号";
                    Name.innerHTML = "名称";
                    NO.innerHTML = "编号";
                    Type.innerHTML = "字段类型";
                    defaultV.innerHTML = "默认值";
                    operate.innerHTML = '操作';
                }
                else {
                    //生成表数据
                    NewRow = table.insertRow(); //添加行
                    ID = NewRow.insertCell(); //添加列
                    Name = NewRow.insertCell();
                    NO = NewRow.insertCell();
                    Type = NewRow.insertCell();
                    defaultV = NewRow.insertCell();
                    operate = NewRow.insertCell();
                    ID.innerHTML = i;
                    var rowsNum = i - 1;
                    Name.innerHTML = "<input id=Name" + (rowsNum + 1) + " style=' 80px;' type='text' value=" + RowArr[rowsNum][0] + " />";
                    NO.innerHTML = "<input id=No" + (rowsNum + 1) + "  style=' 80px;' type='text' value=" + RowArr[rowsNum][1] + " />";
                    Type.innerHTML = "<input id=Type" + (rowsNum + 1) + "  style=' 80px;' type='text' value=" + RowArr[rowsNum][2]+ " />";
                    defaultV.innerHTML = "<input id=defaultV" + (rowsNum + 1) + "  style=' 80px;' type='text' value=" + RowArr[rowsNum][3] + " />";
                    operate.innerHTML = '<div id=operate' + (rowsNum + 1) + '><a style="cursor:pointer;color:#007bff;"  onclick="saveInterfaceParam();">保存</a>&nbsp;&nbsp;<a style="cursor:pointer;color:#007bff;"  onclick="saveInterfaceParam();">取消</a></div>';
                }
            }
        }
     </script>
    </html>
  • 相关阅读:
    Prometheus学习系列(九)之Prometheus 存储
    Prometheus学习系列(八)之Prometheus API说明
    SSE图像算法优化系列七:基于SSE实现的极速的矩形核腐蚀和膨胀(最大值和最小值)算法。
    Crimm Imageshop 2.3。
    【短道速滑一】OpenCV中cvResize函数使用双线性插值缩小图像到长宽大小一半时速度飞快(比最近邻还快)之异象解析和自我实现。
    【算法随记七】巧用SIMD指令实现急速的字节流按位反转算法。
    【算法随记六】一段Matlab版本的Total Variation(TV)去噪算法的C语言翻译。
    SSE图像算法优化系列三十:GIMP中的Noise Reduction算法原理及快速实现。
    一种快速简便优秀的全局曲线调整与局部信息想结合的非线性彩色增强算法(多图深度分析和探索)
    【算法随记五】使用FFT变换自动去除图像中严重的网纹。
  • 原文地址:https://www.cnblogs.com/LiLiliang/p/12488423.html
Copyright © 2020-2023  润新知