一、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;}
}