JavaScript development of shopping cart function implementation
The previous section related the design of the shopping cart page
This section implements various functions of the shopping cart through JavaScript code.
Idea:
Step one: After the page is loaded, dynamically generate a table (shopping cart list) based on local data
Get the node object to be operated
Determine whether there is data in the shopping cart?
Yes: Display the shopping list
No: Prompt that the shopping cart is empty
Step 2: When the shopping cart list is dynamically generated, obtain all checkeBox label node objects in the tbody and see which one is If selected, the subtotal of the corresponding row will be obtained for total price calculation.
Step 3: Add an onchange event for each checkbox and change the total price based on the operation
Step 4: Select all
Step 5: Add a mouse click event for the add and subtract buttons to change the product Number
Step 6: Delete
Get all delete buttons
Add a mouse click event for the delete button
Delete the current row and update local data
Create a cart.js file and put the above JavaScript code into it.
Later called from the HTML page to achieve the function module effect.