使用jQuery實現購物車

時間  2020-11-30
標籤 css html jquery app 學習 this spa code htm blog 欄目 JQuery 简体版
原文   原文鏈接

這篇文章主要爲你們詳細介紹了使用jQuery實現購物車，文中示例代碼介紹的很是詳細，具備必定的參考價值，感興趣的小夥伴們能夠參考一下css

本文實例爲你們分享了jQuery實現購物車的具體代碼，供你們參考，具體內容以下html

HTML代碼jquery

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
< body >
   < div id = "goodsStore" >
     < table >
       < caption >儲 物 倉</ caption >
       < thead >
         < tr >
           < td >商品編號</ td >
           < td >商品名稱</ td >
           < td >商品單價</ td >
           < td >商品顏色</ td >
           < td >商品庫存</ td >
           < td >操做</ td >
         </ tr >
       </ thead >
       < tbody >
         < tr >
           < td >2018090201</ td >
           < td >鼠標</ td >
           < td >78</ td >
           < td >黑色</ td >
           < td >500</ td >
           < td >
             < input type = "button" value = "加入購物車" onclick = "addGoods(this);" />
           </ td >
         </ tr >
         < tr >
           < td >2018090202</ td >
           < td >鍵盤</ td >
           < td >45</ td >
           < td >白色</ td >
           < td >300</ td >
           < td >
             < input type = "button" value = "加入購物車" onclick = "addGoods(this);" />
           </ td >
         </ tr >
         < tr >
           < td >2018090203</ td >
           < td >顯示器</ td >
           < td >880</ td >
           < td >黑色</ td >
           < td >200</ td >
           < td >
             < input type = "button" value = "加入購物車" onclick = "addGoods(this);" />
           </ td >
         </ tr >
         < tr >
           < td >2018090204</ td >
           < td >主機</ td >
           < td >2332</ td >
           < td >藍色</ td >
           < td >350</ td >
           < td >
             < input type = "button" value = "加入購物車" onclick = "addGoods(this);" />
           </ td >
         </ tr >
       </ tbody >
     </ table >
   </ div >
   < div id = "goodsPay" >
     < table >
       < caption >購 物 車</ caption >
       < thead >
         < tr >
           < td >商品編號</ td >
           < td >商品名稱</ td >
           < td >商品單價</ td >
           < td >商品顏色</ td >
           < td >購買數量</ td >
           < td >單項小計</ td >
           < td >操做</ td >
         </ tr >
       </ thead >
       < tbody id = "gwc" >
       </ tbody >
       < tfoot >
         < tr >
           < td colspan = "5" >總計</ td >
           < td colspan = "2" id = "sum" >0</ td >
         </ tr >
       </ tfoot >
     </ table >
   </ div >
</ body >

CSS代碼app

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
<style>
     * {
       margin : 0 ;
       padding : 0 ;
     }
     div {
       width : 1000px ;
       height : 350px ;
       border : 3px solid #ccc ;
       margin : 5px auto ;
       overflow : auto ;
     }
     table {
       border-collapse : collapse ;
       width : 100% ;
     }
     td {
       border : 1px solid black ;
       text-align : center ;
       height : 30px ;
     }
     caption {
       font-size : 28px ;
       font-weight : bold ;
     }
     #gwc input[type= "text" ] {
       width : 30px ;
       margin-left : 4px ;
       margin-right : 4px ;
     }
     #gwc input[type= "button" ] {
       width : 20px ;
     }
</style>

JavaScript代碼學習

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
<script src= "jquery-1.11.1/jquery.js" ></script>
   <script>
     var sum; //定義全局變量：購物車商品總計
     $( function () {
       //頁面加載完成後給全局變量賦值
       sum = $( "#sum" );
     })
     function addGoods(btn) {
       var td = $(btn).parent();
       var tr = $(td).parent();
       var tds = $(tr).children();
       //建立一個行節點
       var newTr = $( "<tr></tr>" );
       //給行節點賦值
       newTr.html(
         '<td>' + tds[0].innerHTML + '</td>' +
         '<td>' + tds[1].innerHTML + '</td>' +
         '<td>' + tds[2].innerHTML + '</td>' +
         '<td>' + tds[3].innerHTML + '</td>' +
         '<td>' +
           '<input type="button" value="-" onclick="reduce(this)" />' +
           '<input type="text" value="1" readonly />' +
           '<input type="button" value="+" onclick="add(this)" />' +
         '</td>' +
         '<td>' +
           tds[2].innerHTML +
         '</td>' +
         '<td>' +
           '<input type="button" value="X" onclick="deleteGoods(this);" />' +
         '</td>'
       );
       //追加新節點
       $( "#gwc" ).append(newTr);
       //更新總計
       var s = parseFloat(sum.html());
       sum.html(s + parseFloat(tds[2].innerHTML));
     }
     function add(btn) {
       //獲取按鈕的上一個兄弟
       var txt = $(btn).prev();
       txt.val(parseFloat(txt.val()) + 1);
       //獲取該商品的單價
       var price = $(btn).parent().prev().prev();
       //更新總計
       var s = parseFloat(sum.html());
       sum.html(s + parseFloat(price.html()));
     }
     function reduce(btn) {
       //獲取按鈕的下一個兄弟
       var txt = $(btn).next();
       if (parseFloat(txt.val()) == 1) {
         return ;
       }
       txt.val(parseFloat(txt.val()) - 1);
       //獲取該商品的單價
       var price = $(btn).parent().prev().prev();
       //更新總計
       var s = parseFloat(sum.html());
       sum.html(s - parseFloat(price.html()));
     }
     function deleteGoods(btn) {
       //獲取當前行
       var tr = $(btn).parent().parent();
       //刪除當前行
       tr.remove();
       //獲取該商品的單價
       var price = $(btn).parent().siblings().eq(2);
       //更新總計
       var s = parseFloat(sum.html());
       sum.html(s - parseFloat(price.html()));
     }
</script>

最終效果this

 

 以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持我spa

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程