html+css+jquery实现简单的购物车功能

最新推荐文章于 2024-03-18 23:01:18 发布

&蚂蚁

最新推荐文章于 2024-03-18 23:01:18 发布

阅读量749

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/Luck_And_Destiny/article/details/119064281

这篇博客介绍了如何结合HTML、CSS和jQuery来实现一个基本的购物车功能。内容包括HTML页面结构的设计，CSS样式的应用以及JavaScript代码的编写，通过这些技术实现了商品的添加、展示和移除等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML网页代码

<!DOCTYPE html>
<html lang="en">
<head>
</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="add_shoppingcart(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="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table> 
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
        <!-- <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="1"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x"/></td>
        </tr> -->
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
</body>
</html>

CSS样式

 <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;
        }
        th {
          background-color:#eee;
        }
    </style>

JS代码

<script>
          //加入购物车
    	function add_shoppingcart(btn) {
    		//获取按钮父亲的兄弟们tds
    		var $tds = $(btn).parent().siblings();
    		//获取第1个td的内容(商品名)
    		//objs.eq(i) == $(objs[i])
    		var name = $tds.eq(0).html();
    		//获取第2个td的内容(单价)
            var price = $tds.eq(1).html();
                //创建一行tr
    		var $tr = 
	    		$('<tr>'+
	            '<td>'+name+'</td>'+
	            '<td>'+price+'</td>'+
	            '<td align="center">'+
	              '<input type="button" value="-" onclick="decrease(this);"/> '+
	              '<input type="text" size="3" readonly value="1"/> '+
	              '<input type="button" value="+" onclick="increase(this);"/>'+
	            '</td>'+
	            '<td>'+price+'</td>'+
	            '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>'+
	          '</tr>');
    		//将此行追加到tbody下
    		$("#goods").append($tr);
    		sum();

            
    		
        }
        // 从购物车中删除物品
        function del(btn) {
            // 通过点击按钮,获取当前对象的父类的父类,就是<input>标签的父类<td>的父类<tr>,然后移除即可.
            // <tr>是行 <td>是列
            $(btn).parent().parent().remove();
            sum();
        };

    	//加法  购物车中实现点击按钮增加数量
    	function increase(btn) {
    		//获取按钮的哥哥的值(数量)
    		var amount = $(btn).prev().val();
    		//数量+1，再写回文本框
    		$(btn).prev().val(++amount);
    		//获取按钮的父亲的哥哥的内容(单价)
    		var price = $(btn).parent().prev().html();
    		//计算金额，再写入按钮的父亲的弟弟(td3)内
    		$(btn).parent().next().html(amount*price);
    		sum();
        };
        //减法
    	function decrease(btn) {
    		//获取按钮的弟弟的值(数量)
            var amount = $(btn).next().val();
            //数量不能小于1
            if(amount <= 1){
                return;
            }
    		//数量-1，再写回文本框
            $(btn).next().val(--amount);
            
    		//获取按钮的父亲的哥哥的内容(单价)
    		var price = $(btn).parent().prev().html();
    		//计算金额，再写入按钮的父亲的弟弟(td3)内
    		$(btn).parent().next().html(amount*price);
    		sum();
    	};
    	//求和
    	function sum() {
    		//获取tbody下所有的行
    		var $trs = $("#goods tr");
    		//遍历这些行
    		var s = 0;
    		for(var i=0;i<$trs.length;i++) {
    			//获取本行内第4个td的内容
    			var mny = $trs.eq(i).children().eq(3).html();
    			s += parseFloat(mny);
    		}
    		//将结果写入合计列
    		$("#total").html(s);
    	};
    </script>