一、html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的增删改查</title>
<style>
table{
width:100%; /* 与浏览器同宽 */
border-collapse: collapse; /*合并小单元格，使不留缝隙*/
margin-top: 8px; /*与上面拉开间距*/
}
th,td{
border:1px solid #ddd;
text-align: center; /*居中显示*/
padding: 8px; /*使空间大些*/
}
th{
background-color: #ddd;
}
button{
margin-left: 5px;
}
</style>
</head>
<body>
<h1 style="text-align:center">表格的增删改查</h1>
<button onclick='addRow()'>新增数据</button>
<table id="table">
<tr>
<th>姓名</th><th>联系方式</th><th>操作</th>
</tr>
<tr>
<td>小美</td><td>18616416349</td>
<td>
<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
</td>
</tr>
</table>
<!-- 引入js文件 -->
<script src="js\table.js"></script>
</body>
</html>二、js代码：
绑定->获取->增加 / 删除 / 修改
1、绑定事件
在button中添加属性： οnclick='addRow()'
2、获取节点
let table=document.getElementById('table')
let row=button.parentNode.parentNode
3、操作
（1）增加
获取插入行：let length=table.rows.length
let newRow=table.insertRow(length)
插入列单元：let nameCol=newRow.insertCell(0)
补充节点内容：nameCol.innerHTML='***'
（2）删除
由父节点删除：row.parentNode.removeChild(row)
注意：row.parentNode是tbody，而不是table
（3）修改
let name=row.cells[0] //这里name是节点，所以下面要用innerHTML，而不能直接用name
let inputName=prompt("请输入名字：")
if(inputName)
{name.innerHTML=inputName;}
两种弹窗：
alert（显示信息）：消息框，只显示信息
prompt（获取用户输入）：带有输入框的对话框，有返回值（点击取消或关闭，返回null）
//新增数据函数
function addRow(){
//1、去html文档的对应的按钮那里绑定事件 onclick=addRow()
//2、获取表格标签节点，用tagname得到的是一个数组，所以用id
let table=document.getElementById('table');
//3、插入行: 先获取插入的位置
let length=table.rows.length;
//console.log(length); 现有2行：第0行，第1行；插入的就是第2行
//然后插入行节点
let newRow=table.insertRow(length); //会返回当前插入的节点
// console.log(newRow);
// newRow.innerHTML='123'; innerHTML不是方法，而是属性
//4、在新增的行中插入列节点对象
let nameCol=newRow.insertCell(0); //插入新的小单元格，默认与表格的其他单元格对齐
let phoneCol=newRow.insertCell(1);
let actionCol=newRow.insertCell(2);
//然后修改节点内容
nameCol.innerHTML='未命名';
phoneCol.innerHTML='无联系方式';
actionCol.innerHTML='<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>'
//单双引号要注意' "" '
}
//删除数据函数
function deleteRow(button){
//1、去html文档的对应按钮那里绑定事件 onclick=deleteRow()
// console.log(button);->不可以写this，因为这里的函数属于删除button的外部了
//2、获取当前行节点: 父节点的父节点
let row=button.parentNode.parentNode;
console.log(row);
//3、删除行（不能自己删除自己，得由父节点来删）
row.parentNode.removeChild(row);
}
//编辑数据函数
function editRow(button)
{
//1、绑定事件
//2、获取当前行节点
let row=button.parentNode.parentNode;
//3、修改内容
let name=row.cells[0]; //cells不是函数，用中括号；用小括号的是函数
let phone=row.cells[1];
let inputName=prompt("请输入名字：");
let inputPhone=prompt("请输入联系方式：");
if(inputName) //判断输入不为空时，修改值
{name.innerHTML=inputName;}
if(inputPhone)
{phone.innerHTML=inputPhone;}
}
