版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
HTML模块为一个简化版的购物车,tbody为商品列表,tfoot为统计信息,系统会随机在列表中生成一些初始商品信息
1、请完成add函数,在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组
2、请完成bind函数,点击每一行的删除按钮(包括通过add增加的行),从列表中删除对应行
3、请注意同步更新统计信息,价格保留小数点后两位
4、列表和统计信息格式请与HTML示例保持一致
5、不要直接手动修改HTML中的代码
6、不要使用第三方库
<!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>Document</title>
</head>
<body>
<style>
body,
html {
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead {
background: #3d444c;
color: #ffffff;
}
td,
th {
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
<table id="jsTrolley">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>10.00</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>产品2</td>
<td>30.20</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td>产品3</td>
<td>20.50</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总计</th>
<td colspan="2">60.70(3件商品)</td>
</tr>
</tfoot>
</table>
</body>
</html>
<script type="text/javascript">
function add(items) {
var tbody = document.getElementsByTagName('tbody')[0];
for (var i = 0; i < items.length; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td'); //商品
td1.innerText = items[i].name;
tr.appendChild(td1);
var td2 = document.createElement('td'); //价格
var price = parseFloat(items[i].price);
td2.innerText = price.toFixed(2);
tr.appendChild(td2);
var td3 = document.createElement('td'); //价格
td3.innerHTML = '<a href="javascript:void(0);">删除</a>';
tr.appendChild(td3);
tbody.appendChild(tr);
cal();
}
}
// function bind(){
// var lis = document.getElementsByTagName('a');
// for(var i=0;i<lis.length;i++){
// lis[i].οnclick=fn;
// cal();
// }
// function fn(){
// var tbody = document.getElementsByTagName('tbody')[0];
// tbody.removeChild(this.parentNode.parentNode);
// }
// }
//事件委托
function bind() {
var tbody = document.querySelector('tbody');
tbody.addEventListener("click", function (e) {
e = e || window.event;
// console.log(e.target);
if (e.target.tagName !== 'A') {
return;
}
tbody.removeChild(e.target.parentNode.parentNode);
cal();
})
}
function cal() {
var total_price = 0;
var lens = document.querySelectorAll('tbody tr');
var num = lens.length;
var td = document.querySelector('tfoot td');
for (var i = 0; i < num; i++) {
total_price += parseFloat(lens[i].querySelectorAll('td')[1].innerText);
}
td.innerText = total_price.toFixed(2) + '(' + num + '件商品)';
}
var items = [{
name: '产品4',
price: '20.00'
}, {
name: '产品5',
price: '10.00'
}]
add(items);
bind();
</script>