• 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>
  • 相关阅读:
    1649. 超级棒棒糖
    1872. 连接棒材的最低费用
    二叉树的层级遍历转换
    ZMQ的三种消息模式
    logging日志
    Svn基本使用
    Pycharm快捷键
    Redis安装和连接
    整形转中文
    C# Socket连接 无法访问已释放的对象
  • 原文地址:https://www.cnblogs.com/LiLiliang/p/12488423.html
Copyright © 2020-2023  润新知