html购物车中计算总和的代码（html购物车结算代码）

本篇文章给大家谈谈html购物车中计算总和的代码，以及html购物车结算代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、购物车功能 点击一个 checkbox 将这一行的所有数据返回到后端 其中js写的商品数量和商品价格总和怎么传？
• 2、jsp如何计算购物车总价
• 3、用javascript怎样计算购物车价格
• 4、求html购物车代码，，效果如图显示
• 5、用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。

购物车功能 点击一个 checkbox 将这一行的所有数据返回到后端 其中js写的商品数量和商品价格总和怎么传？

首先来说，这个数量和总和肯定是后台计算后显示到前台的，也就是说这根本不用传，直接在后台计算，而且也不能往后台传，容易错。

jsp如何计算购物车总价

%

MapGoods,Integer map=(Map)session.getAttribute("map");

/*if(map==null){

out.println("购物车为空");

return ;

}*/

SetGoods key=map.keySet();

// 计算总金额 sums

double sums=0;

for(Goods g:key){

sums=sums+g.getGPRICE()*map.get(g);

}

session.setAttribute("sums",sums);

%

最后一行

span%=sums %元/span

用javascript怎样计算购物车价格

/*计算总价格*/

var totalPrice=0;

for(var a=1;a3;a++){

var quantity=document.getElementById("quantity"+a).value;

var price=document.getElementById("price"+a).value;

var smallTotal=quantity*price;

totalPrice=totalPrice+smallTotal;

}

var total=document.getElementById("total");

total.innerHTML=totalPrice;

}

/script

script type="text/javascript"

function initialize()

{

var totalPrice=0;

for(var a=1;a3;a++){

var quantity=document.getElementById("quantity"+a).value;

var price=document.getElementById("price"+a).value;

var smallTotal=quantity*price;

totalPrice=totalPrice+smallTotal;

/*alert(smallTotal);*/

var smallT=document.getElementById("smallTotal"+a);

smallT.innerHTML=smallTotal;

}

/*取出购物车的所有商品的价格总和*/

var total=document.getElementById("total");

total.innerHTML=totalPrice;

}

/script

style type="text/css"

#imgtest {

position: absolute;

top: 100px;

left: 400px;

z-index: 1;

}

table {

left: 100px;

font-size: 20px;

}

/style

/head

body onload="initialize()"

div id="imgtest"/div

br /

br /

table border="1" style="text-align: center;" align="center"

thead style="height: 50"

td style="WIDTH: 300px"

商品名称

/td

td style="WIDTH: 60px"

图片

/td

td style="WIDTH: 170px"

数量

/td

td style="WIDTH: 170px"

价格

/td

td style="WIDTH: 250px"

小计

/td

/thead

tbody

tr

td class="name"商品1/td

td class="image"

img src="1.jpg" width="40px" height="40px" id="image1" /

/td

td class="quantity"

input id="quantity1" value="1" onblur="total(1);" /

/td

td class="price"

input type="hidden" id="price1" value="20" /

20

/td

td class="total"

span id="smallTotal1"/span 元

/td

/tr

tr

td class="name"商品2/td

td class="image"

img src="1.jpg" width="40px" height="40px" id="image1" /

/td

td class="quantity"

input id="quantity2" value="2" onblur="total(2);" /

/td

td class="price"

input type="hidden" id="price2" value="30" /

30

/td

td class="total"

span id="smallTotal2"/span 元

/td

/tr

tr

td colspan="4" class="cart_total"

br

/td

td

span class="red"总计:/spanspan id="total"/span 元

/td

/tr

/tbody

/table

/body

/html

求html购物车代码，，效果如图显示

html xmlns=""    

head    

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /    

title修改订单/title    

style type="text/css"    

body{    

font-size:13px;    

line-height:25px;    

}    

table{    

border-top: 1px solid #333;    

border-left: 1px solid #333;    

width:400px;    

}    

td{    

border-right: 1px solid #333;    

border-bottom: 1px solid #333;    

text-align:center;    

}    

.title{

font-weight:bold;    

background-color: #cccccc;    

}    

input text{    

width:100px;    

}    

/style    

script type="text/javascript"    

function addRow(){    

//行的长度    

var rowlength=document.getElementById("order").rows.length;    

//得到整个表格对象    

var order = document.getElementById("order").insertRow(rowlength-1);    

order.id=rowlength-1;    

//插入列    

var cel1=order.insertCell(0).innerHTML="游戏光盘";    

var cel2=order.insertCell(1).innerHTML="34";    

var cel3=order.insertCell(2).innerHTML="yen;58.40";    

var cel4=order.insertCell(3).innerHTML="input type=\"button\"value=\"删除\" onclick=\"delRow('"+(rowlength-1)+"')\"/"+ "input type=\"button\"value=\"修改\" onclick=\"editRow('"+(rowlength-1)+"')\"/"    

}    

function delRow(qwe){    

var ewq=document.getElementById(qwe).rowIndex;    

document.getElementById("order").deleteRow(ewq);    

}    

function editRow(rowID){    

var row=document.getElementById(rowID);    

var cel=row.cells;    

var text=cel[1].innerHTML;    

cel[1].innerHTML="input type='text' value='"+text+"' style='width:40px;'"    

cel[3].lastChild.value="确定";    

cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')");    

}    

function update(qwe){    

var row=document.getElementById(qwe);    

var cel=row.cells;    

var text=cel[1].lastChild.value;    

cel[1].innerHTML=text;    

cel[3].lastChild.value="修改";    

cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')");    

}    

/*

function add(){    

var a = document.getElementById("order").rows.length;    

var b = document.getElementById("order").insertRow(a-1);    

var one1 = b.insertCell(0).innerHTML="123";    

}    

*/    

/script    

/head    

body    

table border="0" cellspacing="0" cellpadding="0" id="order"    

 tr class="title"    

   td商品名称/td    

   td数量/td    

   td价格/td    

   td操作/td    

 /tr    

 tr id="1"    

   td防滑真皮休闲鞋/td    

   td12/td    

   tdyen;568.50/td    

   tdinput name="rowdel" type="button" value="删除" onclick='delRow("1")' /    

   input id="edit1" type="button" value="修改" onclick='editRow("1")' //td    

 /tr    

 tr    

   td colspan="4" style="height:30px;"    

   input name="addOrder" type="button" value="增加订单" onclick="addRow()" //td    

 /tr    

/table    

/body    

/html

这个是我原来上学的时候练习的代码，练习的是基础的jsDOM操作，不过建议以后用Jquery 比较方便  有什么不懂得可以问我

用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。

html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax

纯前端的话可以参考下面的

!DOCTYPE html    

html lang="en"    

head    

meta charset="UTF-8"    

titlecart/title    

style type="text/css"

    body,p,a,input{

    margin: 0;

    padding: 0;

    font-size: 12px;

}

.container{

    width: 100%;

}

.main{

    width: 1000px;

    height: 500px;

    margin:100px auto;

}

.main .cart-container table{

    width: 100%;

}

.main .cart-container table tr{

    text-align: center;

}

.main .cart-container table tr:hover{

    background: rgba(128, 128, 128, 0.2);

}

.main .cart-container table .table-header{

    height: 30px;

    background: #d9d9d9;

    font-size: 1.2em;

}

.main .cart-container table .table-header td:first-child{

    border-left: solid 4px red;

    box-sizing: border-box;

}

.main .cart-container table tr td:nth-child(1),

.main .cart-container table tr td:nth-child(2){

    text-align: left;

}

.main .cart-container table tr td:nth-child(2){

    width: 52%;

}

.main .cart-container table tr td:nth-child(3){

    width: 12%;

}

.main .cart-container table tr td:nth-child(4){

    width: 12%;

}

.main .cart-container table tr td:nth-child(5){

    width: 12%;

}

.main .cart-container table tr td:last-child{

    width: 10%;

}

.cart-good{

    height: 60px;

}

.cart-good img{

    float: left;

    margin: 10px;

    width: 60px;

}

.cart-good td p{

    margin: 10px 0px;

}

/*加、减按钮*/

.cart-good td input[type='button']{

     width: 20px;

     height: 20px;

     background: #00f300;

     outline: none;

     border: none;

 }

.cart-good td input[type='button']:disabled{

    background: grey;

}

.cart-good td input[type='button']:first-child{

   margin-right: -4px;

}

.cart-good td input[type='button']:last-child{

    margin-left: -4px;

}

.cart-good td input[type='text']{

    width: 30px;

    height: 20px;

    outline: none;

    border: none;

    text-align: center;

}

.table-footer{

    display: flex;

    justify-content: space-between;

    line-height: 40px;

}

.table-footer div{

    font-size: 1.2em;

}

.table-footer div button{

    background: red;

    width: 120px;

    height: 40px;

    color: white;

}

/style  

/head    

body    

div class="container"    

header/header    

section class="main"    

div class="cart-container"    

table cellspacing="0"    

tr class="table-header"    

tdinput type="checkbox" id="chk_alla"/td    

td聚美优品发货/td    

td聚美价/td    

td数量/td    

td小计/td    

td操作/td    

/tr    

!--tr class="cart-good"--    

!--tdinput type="checkbox" id="001"/td--    

!--td--    

!--img src="" alt=""--    

!--p[极速免税]PITTA MASK 口罩3枚入/p--    

!--p型号：新版防晒款  容量：3枚入/p--    

!--/td--    

!--td89.00/td--    

!--td--    

!--input type="button" value="-"--    

!--input type="text" value="1"--    

!--input type="button" value="+"--    

!--/td--    

!--td89.00/td--    

!--tda href="#"删除/a/td--    

!--/tr--    

/table    

div class="table-footer"    

div    

input type="checkbox" id="chk_allb" label for="chk_allb"全选/label    

span style="margin-left: 20px"继续购物 | 清空选中商品/span    

/div    

div    

共 span id="good_count"5/span件商品    商品应付总额：span id="goods_total"¥229.00/span    

button class="btn_menu"去结算/button    

/div    

/div    

/div    

/section    

/div    

script

(function () {

    var skin_products= [

        {

            "id":"002",

            "title": "Estee Lauder 多效智妍精华霜15ml",

            "img_url": "",

            "price": 249.0,

            "number":6,

            "acount": "520",

            "ischecked":true

        },

        {

            "id":"004",

            "title": "EsteeLauder 肌透修护洁面乳30ml",

            "img_url": "",

            "price": 49.9,

            "number":1,

            "acount": "5911",

            "ischecked":false

        },

        {

            "id":"008",

            "title": "雅诗兰黛无痕持妆粉底液",

            "img_url": "",

            "price": 69.9,

            "number":2,

            "acount": "3972",

            "ischecked":true

        },

        {

            "id":"0012",

            "title": "Estee Lauder 肌初赋活原生液30ml",

            "img_url": "",

            "price": 159.0,

            "number":1,

            "acount": "2338"

        },

        {

            "id":"001",

            "title": "雅诗兰黛无痕持妆粉底液30ml",

            "img_url": "",

            "price": 298.0,

            "number":4,

            "acount": "5071",

            "ischecked":false

        },

        {

            "id":"009",

            "title": "雅诗兰黛眼部精华霜15ml",

            "img_url": "",

            "price": 399.0,

            "number":1,

            "acount": "4022",

            "ischecked":false

        }

    ]

//    添加商品

    function load() {

        var tbody=document.querySelector('.cart-container table tbody');

        for(let good of skin_products){

            tbody.innerHTML+=` tr class="cart-good" id="${good.id}"

                            tdinput type="checkbox" class="good-check" ${good.ischecked?"checked":''}/td

                            td

                                img src="${good.img_url}" alt=""

                                p[极速免税]PITTA MASK 口罩3枚入/p

                                p型号：新版防晒款  容量：3枚入/p

                            /td

                            td${good.price}/td

                            td

                                input type="button" value="-"  ${good.number=1?"disabled":''}

                                input type="text" value="${good.number}"

                                input type="button" value="+"

                            /td

                            td${good.price*good.number}/td

                            tda href="#"删除/a/td

                        /tr`

        }

        totalAcount();

    }

    load();

//    end all..........

    // 1. 为table注册单击事件

    var table01=document.querySelector('.cart-container table');

    table01.onclick=function (event) {

        var node=event.target

        if(node.getAttribute('type')=='button'){

            // alert(event.target.value);

            changeNumber(event);

            subtotal(event);

            checkedRow(event);

            checkedAllRows();

        }else if(node.className=='good-check'){

            checkedAllRows();

        }else if(node.id=='chk_alla'){

            var f=event.target.checked;

            var chks=document.querySelectorAll('.good-check');

            for(var ck of chks){

                ck.checked=f;

            }

            for(var good of skin_products){

                good.ischecked=f;

            }

        }else if(node.nodeName.toLowerCase()=='a'){

            var tr=event.target.parentNode.parentNode;

            for(var i=0;iskin_products.length;i++){

                if(skin_products[i].id==tr.id){

                    skin_products.splice(i,1);

                    console.log(skin_products);

                }

            }

            tr.parentNode.removeChild(tr);

        }

        totalAcount();

    };

    //单击增加或减少按钮的方法

    function changeNumber(event) {

        var node=event  event.target;

        var v=0;

        if(node.value  node.value=='+'){

            // node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;

            node.previousElementSibling.value++;

            v=node.previousElementSibling.value;

            node.previousElementSibling.previousElementSibling.disabled=false;

        }else{

            // if(node.value  node.value=='+')

            if(node.nextElementSibling.value1){

                node.nextElementSibling.value--;

                v=node.nextElementSibling.value;

                if(v==1){

                    node.disabled=true;

                }

            }

        }

    //    存储商品数量

        var id=node.parentNode.parentNode.id;

        for(var good of skin_products){

            if(id==good.id){

                good.number=v;

            }

        }

    }

//    每个商品小计的方法

    function subtotal(event) {

        var node=event  event.target;

        // var id=node.parentNode.parentNode.id;

        // for(var g of skin_products){

        //     if(g.id==id){

        //         alert(g.price);

        //     }

        // }

        // var price=；

        var price=node.parentNode.previousElementSibling.innerText;

        var num=node.parentNode.children[1].value;

        node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);

    }

//    检验该商品是否选中

    function checkedRow(event) {

        event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;

        // event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;

        // var tbody=event.target.parentNode.parentNode.parentNode;

        // event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;

    }

//   检查是否全选

    function checkedAllRows() {

        var chks=document.querySelectorAll('.good-check');

        var flag=true;

        for(var ck of chks){

            if(!ck.checked){

                flag=false;

                break;

            }

        }

        document.querySelector('#chk_alla').checked=flag;

    }

//    统计商品总量和总价格

    function totalAcount() {

        var total=0;

        var total_price=0;

        var chks=document.querySelectorAll('.good-check');

        for(var ck of chks){

            if(ck.checked){

                id=ck.parentNode.parentNode.id;

                for(var good of skin_products){

                    if(id==good.id){

                        total+=~~good.number;

                        total_price=total_price+(good.number*good.price);

                        good.ischecked=true;

                    }

                }

            }

        }

        document.querySelector('#good_count').innerText=total;

        document.querySelector('#goods_total').innerText=total_price;

    }

})();

/script    

/body    

/html

html购物车中计算总和的代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html购物车结算代码、html购物车中计算总和的代码的信息别忘了在本站进行查找喔。