效果: 交流群:970353786 布局代码:
#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;
}
通讯录
编号姓名
电话操作
1张三18866668888删除
2李四18812345678删除
添加新行
删除功能代码:
#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;
}
通讯录
编号姓名
电话操作
1张三18866668888删除
2李四18812345678删除
添加新行
//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 button{
width: 100%;
margin-top: 20px;
height: 50px;
background-color: aquamarine;
border-radius: 25px;
border: none;
font-size: 20px;
}
通讯录
编号姓名
电话操作
1张三18866668888删除
2李四18812345678删除
添加新行
//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
关注
打赏