一、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得到的是一个数组，所以用idlet 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;}
}
之小试牛刀)
)
