<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>產(chǎn)品1</td><td>10.00</td><td><a href="javascript:void(0);">刪除</a></td></tr>
<tr><td>產(chǎn)品2</td><td>30.20</td><td><a href="javascript:void(0);">刪除</a></td></tr>
<tr><td>產(chǎn)品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(){//頁面加載完之后執(zhí)行
add([{name:"213",price:1},{name:"456",price:3}]);//調(diào)用
bind();//調(diào)用}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>聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
