JavaScript development of shopping cart display page

This section creates a shopping cart display page

Display product pictures, product content description, product quantity selection, product unit price

Product price subtotal, product deletion operation, and total product price calculate.

Content: Information and operations of the selected product<table>Define HTML table.

# Title: Shopping Cart
jumping list page Display various information names such as: pictures, descriptions, unit prices, selections, etc.

Display total price
##Use <h2> to define the title for the shopping cart

<thead> displays the table header, the <tr> element defines the table row, and the <th> element defines the table header, which contains pictures, descriptions, quantities, unit prices, subtotals, operations, etc.

<tbody> displays the table content part, and the <tr><td> element defines the table unit to display the product content.

<button> tags to create "+" and "-" buttons, and use <input type="text"> in the middle to display the quantity.

The total price is displayed outside the bottom table.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <!--购物车样式表-->
  <style>
    h2{
      text-align: center;
    }
    table{
      margin: auto;
      width: 90%;
      border-color: inherit;
    }
    th{
      color: white;
      font-weight: bold;
      font-family: 微软雅黑,宋体;
    }
    img{
      height: 60%;
      display: block;
      margin: auto;
    }
    input{
      text-align: center;
      font-weight: bold;
    }
    button{
      font-weight: bold;
      font-size: 13px;
    }
  </style>
</head>
<body>
<div class="container">
  <h2>购物车</h2>
  <h3><a href="list.php">返回商品列表页面</a></h3>
  <table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
    <thead>
    <tr style="background-color: #87adbf;">
      <th>
        <input type="checkbox" id="allCheck" class="ck" />全选
      </th>
      <th>图片</th>
      <th>描述</th>
      <th>数量</th>
      <th>单价</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
    <!--
    <tr>
      <td><input type="checkbox" class="ck" /></td>
      <td>
       <img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
      </td>
      <td>纯机械，超酷表带</td>
      <td>
       <button style="width:100%;"class="down">-</button>
       <input style="width:100%;" type="text" value="1" readonly="readonly" />
       <button class="up">+</button>
      </td>
      <td>￥<span>3567</span></td>
      <td>￥<span>3567</span></td>
      <td><button class="del">删除</button></td>
    </tr>
    -->
    </tbody>
  </table>
  <div class="box" id="box"></div>
  <h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2>
</div>
</body>
</html>

In this way we created a simple shopping cart page cart.php file.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title>  <style> h2{ text-align: center; } table{ margin: auto; width: 90%; border-color: inherit; } th{ color: white; font-weight: bold; font-family: 微软雅黑,宋体; } img{ height: 60%; display: block; margin: auto; } input{ text-align: center; font-weight: bold; } button{ font-weight: bold; font-size: 13px; } </style> </head> <body> <div class="container"> <h2>购物车</h2> <h3><a href="list.php">返回商品列表页面</a></h3> <table id="table" border="1" cellspacing="0" cellpadding="0" class="hide"> <thead> <tr style="background-color: #87adbf;"> <th> <input type="checkbox" id="allCheck" class="ck" />全选 </th> <th>图片</th> <th>描述</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <tr> <td><input type="checkbox" class="ck" /></td> <td> <img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" /> </td> <td>纯机械，超酷表带</td> <td> <button style="width:100%;"class="down">-</button> <input style="width:100%;" type="text" value="1" readonly="readonly" /> <button class="up">+</button> </td> <td>￥<span>3567</span></td> <td>￥<span>3567</span></td> <td><button class="del">删除</button></td> </tr> </tbody> </table> <div class="box" id="box"></div> <h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2> </div> </body> </html>

submit Reset Code

Automatic operation

JavaScript development of shopping cart display page

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]