原生JS购物车的动态增删与计算

发表于 | 分类于 | | 阅读次数 |
很基础也很考验编程的小代码~可以直接复制粘贴看滴哦看。

一、预备知识

  1. 如何获取js对象的数据
  2. 如何删除dom节点
  3. 如何进行数值转换
  4. forEach遍历
  5. 事件监听

二、直接上代码咯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
</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>
    	let items = [{name:'产品4',price:17.89},{name:'产品5',price:21.36}];
    	
    	function add(items){
    		let tbody = document.getElementById('jsTrolley').getElementsByTagName('tbody')[0];
    		(items || []).forEach(function (item){
    			let 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(){
    		let table = document.getElementById('jsTrolley');
    		table.addEventListener('click',function(event){
    			let el = event.target;
    			if(el.tagName.toLowerCase() === 'a'){
    				tr = el.parentNode.parentNode;
    				tr.parentNode.removeChild(tr);
    				update();
    			}
    		});
    	}
    	
    	function update(){
    		let table = document.getElementById('jsTrolley');
    		let tbody = table.getElementsByTagName('tbody')[0];
    		let tfoot = table.getElementsByTagName('tfoot')[0];
    		let tr = [].slice.call(tbody.getElementsByTagName('tr'),0);
    		let total = 0;
    		tr.forEach(function (tr){
    			total += +(tr.getElementsByTagName('td')[1].innerHTML.trim());
    		});
    		tfoot.getElementsByTagName('td')[0].innerHTML = total.toFixed(2)+'('+tr.length+'件商品)';
    	}
    	
    	add(items);
    	bind();
    </script>
</body>
</html>