jquery实现购物车功能(1)

 更新时间:2021-08-05 16:20:13   作者:佚名   我要评论(0)

本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下
html


&#8203;<!DOCTYPE html>
<html>
<head>
<title>购物

本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下

html

​<!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;
}
 
th {
    background-color: #eee;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="gw.js"></script>
</head>
<body>
    <h1>真划算</h1>
    <table id="tb1">
        <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="addshoping(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="addshoping(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="addshoping(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="addshoping(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="addshoping(this);" /></td>
        </tr>
    </table>
 
    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="goods">
 
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td id="total"></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
 
</body>
</html>

js

//添加购物车
function addshoping(btn) {
 
        var name = $(btn).parent().siblings().eq(0).html()
        var price = $(btn).parent().siblings().eq(1).html()
 
         var trs = $("#goods tr")
         var nameArr = new Array();
         $.each(trs, function (index, value) {
             nameArr.push($(this).children('td').eq(0).text())
         })
        var $tr = $('<tr>' +
            '<td>' + name + '</td>' +
            '<td>' + price + '</td>' +
            '<td align="center">' +
            '<input type="button" value="-" onclick="jian(this);"/> ' +
            '<input type="number" 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>');
        var ishasName = nameArr.indexOf(name)
        
        if (ishasName >= 0) {
            var goodcount=trs.eq(ishasName).children('td').eq(2).children().eq(1).val()
            Number.parseInt(goodcount);
            trs.eq(ishasName).children('td').eq(2).children().eq(1).val(++goodcount)
            var price=trs.eq(ishasName).children('td').eq(1).html()
             Number.parseInt(price)
             trs.eq(ishasName).children('td').eq(3).html(goodcount*price);
            
                
        } else {
 
           // $tr.insertAfter($("#goods tr:eq(0)"))
            $("#goods").append($tr);
         }
            var kucun = tds.eq(3).html()
   Number.parseInt(kucun)
   tds.eq(3).html(--kucun)
 
        sum()
    }
    //增加
    function increase(btn){
        var num=$(btn).prev().val()
        Number.parseInt(num);
        var bignew=$(btn).prev().val(++num)
        var price = $(btn).parent().prev().html();
        $(btn).parent().next().html(num*price);
        sum();
    
    };
    //减少
    function jian(btn){
        
        var num=$(btn).next().val()
        if(num<=1){
            return;
        }
        Number.parseInt(--num)
        var price = $(btn).parent().prev().html();
        var newprice=$(btn).parent().next().html();
        
        $(btn).parent().next().html(newprice-price);
        $(btn).next().val(num)
      
    sum()
    }
    //删除
    function del(btn){
       $(btn).parent().parent().remove()
       sum();
    }
    //总和
    function sum() {
// 获取tbody下的所有行
var $trs = $("#goods tr");
// 遍历他们
var sum = 0;
for (var i = 0; i < $trs.length; i++) {
    // 获取每一行
    var $tr = $trs.eq(i);
    // 获取该行中第四列的值(金额)
    var mny = $tr.children().eq(3).html();
    sum += parseFloat(mny);
}
// 写入到合计
$("#total").html(sum);
};

运行结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • jQuery实现购物车多物品数量的加减+总价计算
  • jQuery实现加入购物车飞入动画效果
  • JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
  • jQuery实现购物车计算价格功能的方法
  • 纯jquery实现模仿淘宝购物车结算
  • 基于JQuery实现的类似购物商城的购物车
  • jQuery实现购物车数字加减效果
  • jQuery+HTML5加入购物车代码分享
  • jquery购物车结算功能实现方法
  • jQuery实现类似淘宝购物车全选状态示例

您可能感兴趣的文章:

相关文章

  • Vue 可拖拽组件Vue Smooth DnD的使用详解

    Vue 可拖拽组件Vue Smooth DnD的使用详解

    目录简介和 Demo 展示API: Container属性生命周期回调事件API: Draggable实战简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好
    2021-08-05
  • jquery实现购物车功能(1)

    jquery实现购物车功能(1)

    本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下 html &#8203;<!DOCTYPE html> <html> <head> <title>购物
    2021-08-05
  • jsp Response对象页面重定向、时间的动态显示

    jsp Response对象页面重定向、时间的动态显示

    Response对象 response对象主要用于对客户端的请求进行回应,将web服务器处理后的结果发回给客户端,封装了jsp产生的响应,并发送到客户端响
    2021-08-04
  • golang fmt格式“占位符”的实例用法详解

    golang fmt格式“占位符”的实例用法详解

    golang 的fmt 包实现了格式化I/O函数,类似于C的 printf 和 scanf。 # 定义示例类型和变量 type Human struct { Name string } var p
    2021-08-04
  • golang中字符串MD5生成方式总结

    golang中字符串MD5生成方式总结

    方案一 func md5V(str string) string { h := md5.New() h.Write([]byte(str)) return hex.EncodeToString(h.Sum(nil)) } 方
    2021-08-04
  • 试了下Golang实现try catch的方法

    试了下Golang实现try catch的方法

    目录前言 能不能 try catch 加入处理异常方法 总结 前言 Golang语言有诸多优点:静态编译、协程、堪比c语言的高性能。 但是也有一
    2021-08-04
  • Go 每日一库之termtables的使用

    Go 每日一库之termtables的使用

    目录快速使用 模式 总结 今天学个简单点的&#128512;,termtables处理表格形式数据的输出。适用于随时随地的输出一些状态或统计数据,便于
    2021-08-04
  • Golang try catch与错误处理的实现

    Golang try catch与错误处理的实现

    目录Golang try catch panic panic主要使用场景: recover error 预定义错误值 自定义错误类型 使用 panic和recover模拟 tyr catch
    2021-08-04
  • Go每日一库之dateparse处理时间

    Go每日一库之dateparse处理时间

    目录简介 快速使用 格式 时区 cli 总结 参考简介 不管什么时候,处理时间总是让人头疼的一件事情。因为时间格式太多样化了,再加上
    2021-08-04
  • golang 实用库gotable的具体使用

    golang 实用库gotable的具体使用

    目录一 背景 二 库简介 三 代码 3.1 创建表格 3.2 增加row3.3 增加column 3.4 打印表格 3.5 边框操作3.6 输出json 四 测试 4.1 创建
    2021-08-04

最新评论