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="width: 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='width: 80px;' type='text' />"; NO.innerHTML = "<input id=No" + (rowsNum + 1) +" style='width: 80px;' type='text' />"; Type.innerHTML = "<input id=Type" + (rowsNum + 1) +" style='width: 80px;' type='text' />"; defaultV.innerHTML = "<input id=defaultV" + (rowsNum + 1) +" style='width: 80px;' type='text' />"; operate.innerHTML = '<div id=operate' + (rowsNum + 1) + '><a style="cursor:pointer;color:#007bff;" onclick="saveInterfaceParam();">保存</a> <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("\n")[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> <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("\n")[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> <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='width: 80px;' type='text' value=" + RowArr[rowsNum][0] + " />"; NO.innerHTML = "<input id=No" + (rowsNum + 1) + " style='width: 80px;' type='text' value=" + RowArr[rowsNum][1] + " />"; Type.innerHTML = "<input id=Type" + (rowsNum + 1) + " style='width: 80px;' type='text' value=" + RowArr[rowsNum][2]+ " />"; defaultV.innerHTML = "<input id=defaultV" + (rowsNum + 1) + " style='width: 80px;' type='text' value=" + RowArr[rowsNum][3] + " />"; operate.innerHTML = '<div id=operate' + (rowsNum + 1) + '><a style="cursor:pointer;color:#007bff;" onclick="saveInterfaceParam();">保存</a> <a style="cursor:pointer;color:#007bff;" onclick="saveInterfaceParam();">取消</a></div>'; } } } </script> </html>
