知識點：
操作table: insertRow()，deleteRow()，insertCell()，deleteCell()
table表格中的常用方法和屬性:
deleteRow(行號):刪除行
rowIndex:獲取當前行數的數值
insertRow(行號):添加一行,行數的值
insertCell(數字):添加的是td單元格,數字代表單元格
parentNode:代表找的是父節點
內容比較簡單，直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
table{
width: 600px;
height: auto;
border-collapse: collapse;
margin: 10px auto;
text-align: center;
}
th,td{
padding: 10px;
}
table tr:nth-child(1){
text-align: right;
}
input{
outline: none;
}
</style>
</head>
<body>
<table border="1">
<caption>增刪改查</caption>
<tr>
<td colspan="1">
<button class="insertTr">插入行</button>
</td>
<td colspan="4">
篩選:<input type="text" name="filterStudent">
</td>
</tr>
<tr>
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>操作</th>
</tr>
<tr>
<td>01</td>
<td>妞妞</td>
<td>女</td>
<td>10</td>
<td>
<button class="edit">編輯</button>
<button class="delete">刪除</button>
</td>
</tr>
<tr>
<td>02</td>
<td>泡泡</td>
<td>男</td>
<td>16</td>
<td>
<button class="edit">編輯</button>
<button class="delete">刪除</button>
</td>
</tr>
<tr>
<td>03</td>
<td>哈哈</td>
<td>男</td>
<td>17</td>
<td>
<button class="edit">編輯</button>
<button class="delete">刪除</button>
</td>
</tr>
</table>
<script type="text/javascript">
/*
deleteRow(行號):刪除行
rowIndex:獲取當前行數的數值
*/
var insertTr = document.querySelector('.insertTr');
var deleteBtn = document.querySelector('.delete');
var tableEle = document.querySelector('table');
/*插入*/
insertTr.addEventListener('click',function(){
tableEle.insertRow(tableEle.rows.length);/*插入空行*/
console.log(tableEle.rows[1])
for(var i=0;i<tableEle.rows[1].cells.length;i++){
tableEle.rows[tableEle.rows.length-1].insertCell(i);
}
tableEle.rows[tableEle.rows.length-1].cells[i-1].innerHTML = `
<button class="edit">編輯</button>
<button class="delete">刪除</button>
`
})
/* 編輯+刪除功能 */
tableEle.addEventListener('click',function(){
var currentRow=event.target.parentNode.parentNode;
/*編輯*/
if(event.target.className=="edit"){
/*
編輯代碼
cells集合返回表格中所有<td> 或<th> 元素
*/
if(!currentRow.cells[0].isContentEditable){
for(var i=0;i<currentRow.cells.length-1;i++){
currentRow.cells[i].contentEditable = true;
event.target.textContent="保存";
currentRow.cells[0].focus();
}
}else{
for(var i=0;i<currentRow.cells.length-1;i++){
currentRow.cells[i].contentEditable = false;
event.target.textContent="編輯";
}
}
}
/*刪除*/
if(event.target.className=="delete"){
var question = confirm('確定刪除本行？');
if(question){
var index;
/*
rows 集合返回表格中所有行（TableRow 對象）的一個數組
*/
for(var i=0;i<tableEle.rows.length;i++){
if(tableEle.rows[i] == currentRow){
index = i;
console.log(index);
break;
}
}
/*
操作table: insertRow()，deleteRow()，insertCell()，deleteCell()
*/
tableEle.deleteRow(index);
}
}
})
</script>
</body>
</html>