学习笔记视频来源:3小时前端入门教程(HTML+CSS+JS)
https://www.bilibili.com/video/BV1BT4y1W7Aw?p=1&vd_source=01d8d8bf9ce02b30207c26b6979f8a36
源代码:
table_practice.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: 20px;
}
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>yypksqy</td>
<td>12345678910</td>
<td>
<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
</td>
</tr>
</table>
<script src="JS\table.js"></script>
</body>
</html>
table.js文件内容:
// 新增数据函数
function addRow(){
var table = document.getElementById('table');
// console.log(table);
//获取插入的位置
var length = table.rows.length;
// console.log(length);
// 插入行节点
var newRow = table.insertRow(length);
// console.log(newRow);
// 插入列节点对象
var nameCol = newRow.insertCell(0);
var phoneCol = newRow.insertCell(1);
var actionCol = newRow.insertCell(2);
// 修改节点文本内容
nameCol.innerHTML = '未命名';
phoneCol.innerHTML = '无联系方式';
actionCol.innerHTML = '<button οnclick="editRow(this)">编辑</button><button οnclick="deleteRow(this)">删除</button>';
}
// 删除数据函数
function deleteRow(button){
// console.log(button);
var row = button.parentNode.parentNode;
console.log(row);
row.parentNode.removeChild(row);
}
//编辑数据函数
function editRow(button){
// console.log(button);
var row = button.parentNode.parentNode;
var name = row.cells[0];
var phone = row.cells[1];
var inputName = prompt("请输入名字:");
var inputphone = prompt("请输入联系方式:");
name.innerHTML = inputName;
name.innerHTML = inputphone;
}