原生js实现购物车添加删除库存修改

最新推荐文章于 2024-05-28 18:30:26 发布

away.....

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_43498002/article/details/118497169

版权

1、实现效果

在这里插入图片描述

2、代码实现

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
   
        text-align:center;
      }
      table {
   
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
   
        border:2px solid #aaa;
        padding:5px;
      }
    </style>
   
  </head>
  <body>
    <h1>真划算</h1>
    <table>
    <tr>
      <th>商品</th>
      <th>单价(元)</th>
      <th>颜色</th>
      <th>库存</th>
      <th>好评率</th>
      <th>操作</th>
    </tr>   
    <tr>
      <td>罗技M185鼠标</td>
      <td>80</td>
      <td>黑色</td>
      <td>893</td>
      <td>98%</td>
      <td align="center">
        <input type="button" value="加入购物车" onclick="addCar(this)"/>
      </td>
    </tr>
    <tr>
      <td>微软X470键盘</td>
      <td>150</td>
      <td>黑色</td>
      <td>9028</td>
      <td>96%</td>
      <td align="center">
        <input type="button" value="加入购物车" onclick="addCar(this)"/>

最低0.47元/天解锁文章

away.....

关注

1
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
原生js实现购物车添加删除库存修改

1、实现效果2、代码实现<!DOCTYPE html><html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto;
复制链接

扫一扫