收藏
批改状态：合格
老师批语：
总结：
本次练习主要是掌握原生JS常见的DOM选择方法;
getElementById 通过ID选择元素;
children[2]，选择子元素，返回数组，需要加上数组下标选择具体的元素;
tBodies[0]，选择表格的tbody，返回也是数组，需要加下标;
document.createElement('tr')，创建一个新的html元素;
tr3.innerHTML，为html元素添加内容，可以包含html代码，例如'<td> html 内容 </td>';
data = [
{'id':1,'name':'牛奶','num':3,'price':50},
{'id':2,'name':'苹果','num':10,'price':80},
];
动态内容需要把对象用数组包裹起来，因为对象为无序数列，不能通过数组下标循环
+=，把输出的内容都累加到一个变量中
思考：
在DOM中，lastElementChild（返回元素element） 和 lastchild（返回#text node节点） 的区别是什么？Element和Node区别是什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>0117-动态表格</title>
<style>
*{margin: 0;padding: 0;}
table {
border: 1px solid #000;
border-spacing:0;
border-collapse:collapse;
width: 600px;
margin: 0 auto;
}
table td{
border: 1px solid #000;
padding: 5px;
text-align: center;
width: 25%;
}
table caption {
font-weight: bold;
font-size: 20px;
padding: 20px 0;
}
table thead {
background-color:cadetblue;
font-weight: bold;
color: #000;
text-align: center;
}
</style>
</head>
<body>
<!-- 静态表格 -->
<table class="cart-1" id="cart-1" >
<caption>
购物车-01
</caption>
<thead>
<tr>
<td>编号</td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
<td>2</td>
<td>电脑</td>
<td>1</td>
<td>5000</td>
</tr>
</tbody>
</table>
<!-- 动态购物车 -->
<table class="cart-2" id="cart-2">
<caption>
购物车-02
</caption>
<thead>
<tr>
<td>编号</td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 通过选择器将表格最后一行内容修改
let table1 = document.getElementById('cart-1');
let tr1 = table1.children[2].children[0];
let copy = tr1.innerHTML;
let tr3 = document.createElement('tr');
tr3.innerHTML = copy;
table1.tBodies[0].appendChild(tr3);
tr3.children[0].innerHTML = 3;
tr3.lastElementChild.innerHTML = 7000;
// 动态购物车数据
let data = [
{'id':1,'name':'牛奶','num':3,'price':50},
{'id':2,'name':'苹果','num':10,'price':80},
{'id':3,'name':'衣服','num':2,'price':600}
];
let table2 = document.getElementById('cart-2');
let tbody = table2.tBodies[0]; // 默认是一个数组必须用[0]来获取第一个元素
data.forEach(function(value){
let tr = document.createElement('tr');
tr.innerHTML = '<td>'+ value.id +'</td>';
tr.innerHTML += '<td>'+ value.name +'</td>';
tr.innerHTML += '<td>'+ value.num +'</td>';
tr.innerHTML += '<td>'+ value.price +'</td>';
tbody.appendChild(tr);
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
