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>
原文地址:https://www.cnblogs.com/LiLiliang/p/12488423.html