实际效果：点击添加按钮添加新的一行，在行内可对数据进行编辑和删除
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>
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处！ ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处！ ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
