原生js实现表格内容增删改
知识点：
操作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>
