This article example shares the specific code of js to implement a simple shopping cart module for your reference. The specific content is as follows Key Features
Source code:1.html <body> <div id="head" align="center"> <form> <span class="font1">Name:</span><input type="text" id="name"> <span class="font1">Unit price:</span><input type="text" id="price"> <input id="add1" type="button" value="Add"> <input id="pay1" type="button" value="Checkout"> <input id="set1" type="reset" value="Reset"> </form> </div> <div> <table border="1" id="t" > <thead> <tr align="center"> <td><input type="checkbox" style='cursor: pointer'></td> <td>Product Name</td> <td>Price</td> <td>Quantity</td> <td>Operation</td> </tr> </thead> <tbody> </tbody> </table> </div> <div align="right" id="b"> <span>Total price:</span> <span id="Total" style="color: red">0</span> <span>Quantity of product:</span> <span id="TotalNum" style="color: red">0</span> </div> </body> 2.css <style> body{ background-color: coral; } #head{ margin:30px auto 10px auto; } #name,#price{ background-color: aquamarine; } #add1,#pay1,#set1{ color: red; font-weight: bold; background-color: gold; cursor: pointer; } .font1{ font-weight: bold; font-size: large; } #t,#b{ border-collapse: collapse; margin: 30px auto; width: 600px; } #t thead{ border: 3px solid gold; color: white; background-color: blue; } #t tbody{ color: #1414bf; background-color: white; } </style> js part <script src="../lib/jquery-3.3.1.js"></script> <script> //Initialize button function initButton(){ $("input[name=j1]").off(); $("input[name=x1]").off(); //Add quantity button $("input[name=j1]").on("click", function (){ var num = parseInt($(this).prev().val()); if (num > 1){ $(this).prev().prev().attr("disabled",false); } if (num > 9){ $(this).attr("disabled","disabled"); return; } num++; if (num > 1){ $(this).prev().prev().attr("disabled",false); } if (num > 9){ $(this).attr("disabled","disabled"); } $(this).prev().val(num); $("#Total").text(cal()); $("#TotalNum").text(calNum()); } ) //Decrease quantity button$($("input[name=x1]")).click(function (){ var num = parseInt($(this).next().val()); if (num-1 < 10){ $("#add1").prop("disabled",false); } num--; if (num < 10){ $(this).next().next().prop("disabled",false); } if (num == 1){ $(this).prop("disabled","disabled"); } $(this).next().val(num); $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); } // Initialize deletion function initdelete(){ $(".delete").on("click",function (){ $(this).parent().parent().remove(); $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); } //Select all or unselect all function$("thead input[type=checkbox]").on("click",function (){ $("tbody input[type=checkbox]").each(function (index,element){ $(this).prop("checked",$("thead input[type=checkbox]").prop("checked")); $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); }) // Initialize each checkbox function initCheckBox(){ $("tbody input[type=checkbox]").off(); $("tbody input[type=checkbox]").on("change",function (){ $("#Total").text(cal()); $("#TotalNum").text(calNum()); }); } //Calculate the total price function cal(){ var price = null; $("tbody input[type=checkbox]:checked").each(function (){ var priceByOne = parseFloat($(this).parent().next().next().text()); var num = parseFloat($(this).parent().next().next().next().find("input[name='num']").val()); var totalMoneyByone = priceByOne * num; price+= totalMoneyByone; }); return price; } //Calculate the total number function calNum(){ var totalNum = null; $("tbody input[type=checkbox]:checked").each(function (){ var num = parseInt($(this).parent().next().next().next().find("input[name='num']").val()); totalNum+=num; }); return totalNum; } //Settlement$("#pay1").on("click",function (){ alert("Total consumption: "+cal()); $("thead input[type=checkbox]:checked").prop("checked",false); $("tbody input[type=checkbox]:checked").parent().parent().remove(); }); //Add$("#add1").on("click",function (){ var name = $("#name").val(); var price = $("#price").val(); var priceZ = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/ if ((name == "" || price == "") || (!priceZ.test(price)) ){ alert("Input error!"); }else { var GameArr = []; var flag = false; var repeat = null; //Get the name array $("tbody").each(function (){ var finds = $(this).find(".goodsName"); for (let i = 0; i < finds.length; i++) { GameArr.push(finds.eq(i).text()); } }); for (let i = 0; i < GameArr.length; i++) { if (name == GameArr[i]){ repeat = i; flag = true; break; }} //If there is a same name, change the quantity and price if (flag == true){ var totalNum = parseInt($("tbody:eq(" + repeat + ")").find("input[name='num']").val())+1; if (totalNum > 9){ $(this).attr("disabled","disabled"); } $("tbody:eq(" + repeat + ")").find("input[name='num']").val(totalNum); $("tbody:eq(" + repeat + ")").find(".goodsPrice").text(price); //Otherwise concatenate the tables}else { var goods = "<tr>"+ "<td><input type='checkbox' style='cursor: pointer'></td>"+ "<td class='goodsName'>"+name+"</td>"+ "<td class='goodsPrice'>"+price+"</td>"+ "<td>"+ "<input type='button' value='-' name='x1' style='cursor: pointer'> "+ "<input type='text' value='1' name='num'> "+ "<input type='button' value='+' name='j1' style='cursor: pointer'>" +"</td>"+ '<td><a href="" class=" rel="external nofollow" delete" style="color:red">Delete</a></td>' + "</tr>" $("tbody").append(goods); //After adding each time, bind the event initButton(); initdelete(); initCheckBox(); }} }); </script> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Centos7.3 How to install and deploy Nginx and configure https
>>: How to automatically number the results of MYSQL query data
Table of contents 1. MySQL wildcard fuzzy query (...
In the past two days, I have been very troubled t...
Table of contents 1. Vue3 component communication...
Because using group by in MySQL always results in...
Recently, in order to realize the course design, ...
Table of contents 1. Encapsulate complex page dat...
The local environment is Windows 10 + WSL2 (Ubunt...
Preface The reduce() method receives a function a...
In order to avoid repeatedly entering the Docker ...
1. Introduction to Logrotate tool Logrotate is a ...
Sending emails using PHP's mail function The ...
This article example shares the specific code of ...
1 Check the Linux distribution version [root@type...
Table of contents 01 Create invisible columns 02 ...
Superset is a lightweight self-service BI framewo...