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>