发表于： 2022-12-23 21:41:53
0 147
今天学习的js知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制节点-生成动态表格案例</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse; /* border-collapse 属性设置表格的边框是否被合并为一个单一的边框 */
text-align: center;
}
td,th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<!-- <ul>-->
<!-- <li>1</li>-->
<!-- <li>2</li>-->
<!-- <li>3</li>-->
<!-- </ul>-->
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>-->
<!-- <td>张三</td>-->
<!-- <td>JavaScript</td>-->
<!-- <td>100</td>-->
<!-- <td><a href="#">删除</a></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>李四</td>-->
<!-- <td>JavaScript</td>-->
<!-- <td>90</td>-->
<!-- <td><a href="#">删除</a></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>王五</td>-->
<!-- <td>JavaScript</td>-->
<!-- <td>95</td>-->
<!-- <td><a href="#">删除</a></td>-->
<!-- </tr><tr>-->
<!-- <td>陈六</td>-->
<!-- <td>JavaScript</td>-->
<!-- <td>99</td>-->
<!-- <td><a href="#">删除</a></td>-->
<!-- </tr>-->
</tbody>
</table>
<script>
// var ul = document.querySelector('ul');
//1. 复制节点 node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// children 获取子元素
// var lis = ul.children[0].cloneNode();
//2. 复制节点 node.cloneNode(); 括号为true 深拷贝 复制标签里面的内容
// var lili = ul.children[0].cloneNode(true);
// appendChild 是将一个节点附加到指定父节点的子节点列表的末尾处
// ul.appendChild(lis);
// ul.appendChild(lili);
//1.先去准备好学生数据
var datas = [{
name : '张三',
subject : 'JavaScript',
score : 100
},{
name : '李四',
subject : 'JavaScript',
score : 90
},{
name : '王五',
subject : 'JavaScript',
score : 95
},{
name : '陈六',
subject : 'JavaScript',
score : 99
},{
name : '大米',
subject : 'JavaScript',
score : 88
}];
//2.往 tbody 里面创建行：有几个人(通过数组的长度) 我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { //外卖的for循环管行 tr
// Document.createElement() 方法用于创建一个由标签名称
//1、创建tr行
var tr = document.createElement('tr');
//Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。
tbody.appendChild(tr);
// 2、行里面创建单元格 tb 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
for(var k in datas[i]) { // var k in obj遍历对象的方法 里面的for循环管列 td
//创建表单
var td = document.createElement('td');
//把对象里面的属性值 给 td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
//3.创建有删除两个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
// Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。
tr.appendChild(td);
}
//4、 删除操作 开始
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child);
tbody.removeChild(this.parentNode.parentNode);
}
}
// for(var k in obj){
// k得到的是属性名
// obj[k] 得到的是属性值
// }
</script>
</body>
</html>
返回列表
评论