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">
<title>Document</title>
<style type="text/css">
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>
</head>
<body>
<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>
<script type="text/javascript">
//增加
function add(items) {
var tbody = document.querySelector('#jsTrolley tbody');
var len = items.length;
for(var i=0;i<len;i++) {
var name = items[i].name;
var price = items[i].price;
var tr = document.createElement('tr');
var td = '<td>'+name+'</td><td>'+price+'</td><td><a href="javascript:void(0);">删除</a></td>'
tr.innerHTML = td;
tbody.appendChild(tr);
cal();
}
}
//时间监听-删除
function bind() {
var tbody = document.querySelector('#jsTrolley tbody');
var links = tbody.querySelectorAll('a');
//委托事件
tbody.addEventListener('click',function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
console.log(target.tagName);
if(target.tagName !== 'A') {
return;
}
tbody.removeChild(target.parentNode.parentNode);
cal();
})
}
//统计总价和总件数
function cal() {
var total_price = 0;
var trs = document.querySelectorAll('tbody tr');
var total = trs.length;
for(var j=0;j<total;j++) {
total_price += parseFloat(trs[j].querySelectorAll('td')[1].innerText);
}
var tfoot = document.querySelector('#jsTrolley tfoot td');
tfoot.innerText = total_price.toFixed(2)+'('+total+'件商品)';
}
var items = [{name: '4', price: '20.00'},{name: '5', price: '10.00'}]
add(items);
bind();
</script>
</body>
</html>