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>