效果：
布局代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
width: 500px;
/* border: 1px solid black; */
margin: 0px auto;
}
table{
width: 100%;
}
caption{
font-size: 40px;
}
table tr{
height: 40px;
font-size: 20px;
}
tbody td{
text-align: center;
}
width: 100%;
margin-top: 20px;
height: 50px;
background-color: aquamarine;
border-radius: 25px;
border: none;
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<table border="1" cellspacing="0" cellpadding="0">
<caption>通讯录</caption>
<thead>
<tr><th>编号</th><th>姓名</th>
<th>电话</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr>
<tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr>
</tbody>
</table>
<button type="button">添加新行</button>
</div>
</body>
</html>
删除功能代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
width: 500px;
/* border: 1px solid black; */
margin: 0px auto;
}
table{
width: 100%;
}
caption{
font-size: 40px;
}
table tr{
height: 40px;
font-size: 20px;
}
tbody td{
text-align: center;
}
width: 100%;
margin-top: 20px;
height: 50px;
background-color: aquamarine;
border-radius: 25px;
border: none;
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<table id="mytable" border="1" cellspacing="0" cellpadding="0">
<caption>通讯录</caption>
<thead>
<tr><th>编号</th><th>姓名</th>
<th>电话</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr>
<tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr>
</tbody>
</table>
<button id="addNewLineBtn" type="button">添加新行</button>
</div>
</body>
<script type="text/javascript">
//01-静态布局
var table = document.getElementById("mytable")
var addNewLineBtn = document.getElementById("addNewLineBtn")
//02-添加新行
addNewLineBtn.onclick = function(){
var tr = document.createElement("tr");
table.tBodies[0].appendChild(tr);
var rowCount = table.tBodies[0].rows.length;
console.log(rowCount);
for (var i = 0;i < 4;i++) {
var td = document.createElement("td");
tr.appendChild(td);
if (i == 0 ) {
td.innerText = rowCount
}
if (i == 3 ) {
td.innerHTML = '<button type="button">删除</button>'
}
}
// delLine();
}
//03-删除一行
//方法一
// delLine();
// function delLine(){
// var allDeleteBtns = table.tBodies[0].getElementsByTagName("button")
// for (var i = 0; i < allDeleteBtns.length; i++) {
// allDeleteBtns[i].onclick = function(){
// table.tBodies[0].removeChild(this.parentNode.parentNode)
// }
// }
// }
//方法二：事件代理
table.tBodies[0].onclick = function(ev){
console.log(ev.target);//获取单击的元素
if (ev.target.type == "button") {
this.removeChild(ev.target.parentNode.parentNode)
}
}
</script>
</html>
添加功能代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 500px;
/* border: 1px solid black; */
margin: 0px auto;
}
table{
width: 100%;
}
caption{
font-size: 40px;
}
table tr{
height: 40px;
font-size: 20px;
}
tbody td{
text-align: center;
}
#box>button{
width: 100%;
margin-top: 20px;
height: 50px;
background-color: aquamarine;
border-radius: 25px;
border: none;
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<table id="mytable" border="1" cellspacing="0" cellpadding="0">
<caption>通讯录</caption>
<thead>
<tr><th>编号</th><th>姓名</th>
<th>电话</th><th>操作</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>张三</td><td>18866668888</td><td><button type="button">删除</button></td></tr>
<tr><td>2</td><td>李四</td><td>18812345678</td><td><button type="button">删除</button></td></tr>
</tbody>
</table>
<button id="addNewLineBtn" type="button">添加新行</button>
</div>
</body>
<script type="text/javascript">
//01-静态布局
var table = document.getElementById("mytable")
var addNewLineBtn = document.getElementById("addNewLineBtn")
//02-添加新行
addNewLineBtn.onclick = function(){
var tr = document.createElement("tr");
table.tBodies[0].appendChild(tr);
var rowCount = table.tBodies[0].rows.length;
console.log(rowCount);
for (var i = 0;i < 4;i++) {
var td = document.createElement("td");
tr.appendChild(td);
if (i == 0 ) {
td.innerText = rowCount
}
if (i == 3 ) {
td.innerHTML = '<button type="button">删除</button>'
}
}
}
</script>
</html>
