<html>
<head>
<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></body></html><script type="text/javascript">window.onload = function(){//页面加载完之后执行
add([{name:"213",price:1},{name:"456",price:3}]);//调用
bind();//调用}function add(items) {
var tbody = document.getElementById('jsTrolley').getElementsByTagName('tbody')[0];
(items || []).forEach(function (item) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + item.name
+ '</td><td>' + item.price.toFixed(2) + '</td><td><a href="javascript:void(0);">删除</a></td>';
tbody.appendChild(tr);
});
update();
}function bind() {
debugger; var table = document.getElementById('jsTrolley');
table.addEventListener('click', function (event) {
var el = event.target; if (el.tagName.toLowerCase() === 'a') {
tr = el.parentNode.parentNode;
tr.parentNode.removeChild(tr);
update();
}
});
}function update() {
var table = document.getElementById('jsTrolley');
var tbody = table.getElementsByTagName('tbody')[0];
var tfoot = table.getElementsByTagName('tfoot')[0];
var tr = [].slice.call(tbody.getElementsByTagName('tr'), 0);
var total = 0;
tr.forEach(function (tr) {
total += +(tr.getElementsByTagName('td')[1].innerHTML.trim());
});
tfoot.getElementsByTagName('td')[0].innerHTML = total.toFixed(2) + '(' + tr.length + '件商品)';
}</script>声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:0731-84117792 E-MAIL:11247931@qq.com
Copyright © 2019-2023 51dongshi.com 版权所有
违法及侵权请联系：TEL:0731-84117792 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
