购物车...

最新推荐文章于 2024-07-25 11:52:08 发布
shixuerong
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量39
点赞数
文章标签： html css 前端
本文链接：https://blog.csdn.net/shixuerong/article/details/126315108
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
            margin: 100px auto;
            text-align: center;
            width: 50%;
        }

        tr {
            border: 1px solid black;
        }

        th {
            border: 1px solid black;
            width: 150px;
            height: 30px;
            background-color: aqua;
        }

        td {
            border: 1px solid black;
            width: 150px;
            height: 30px;
        }
    </style>
</head>

<body>
    <table class="ww">
        <tr class="number">
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr class="number">
            <td>榴莲</td>
            <td>
                <button>-</button>
                <span class="goods-num">0</span>
                <button>+</button>
            </td>
            <td>单价
                <span>30</span>
            </td>
            <td>小计
                <span  class="subtotal">0</span>
            </td>
            <td>操作
                <input type="button" value="删除">
            </td>
        </tr>
        <tr class="number">
            <td>波罗蜜</td>
            <td>
                <button>-</button>
                <span class="goods-num">0</span>
                <button>+</button>
            </td>
            <td>单价
                <span>80</span>
            </td>
            <td>小计
                <span  class="subtotal">0</span>
            </td>
            <td>操作
                <input type="button" value="删除">
            </td>
        </tr>
        <tr class="number">
            <td colspan="5">
                一共 <span class="total-num">0</span> 件商品,
                共计花费 <span class="total-price">0</span> 元。
            </td>
        </tr>
    </table>
    </table>
    <table>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>臭鳜鱼</td>

            <td>
                单价：<span>60</span>
            </td>
            <td>
                操作 <input class = "add" type="button" value="添加" >
            </td>
        </tr>
        <tr>
            <td>土豆粉</td>

            <td>
                单价：<span>40</span>
            </td>
            <td>
                操作 <input class = "add" type="button" value="添加" >
            </td>
        </tr>
    </table>
</body>

</html>
<script src="./购物车带菜单.js"></script>
<script>
    let oAppend = document.getElementsByClassName("add");
    let oBtns=document.getElementsByTagName("button")
    let oDoodsNum=document.getElementsByClassName("goods-num");
    let oSubtotal=document.getElementsByClassName("subtotal");
    let oDelBtns=document.getElementsByTagName("input")
    let oTotalNum = document.getElementsByClassName("total-num")[0];
    let oTotalPrice = document.getElementsByClassName("total-price")[0];
    let onumber=document.getElementsByClassName("number")

    

    let b=new Banner(oBtns, oDoodsNum, oSubtotal, oDelBtns, oTotalNum, oTotalPrice,oAppend,onumber)
</script>


class Banner {
    constructor(btns, goodsNum, subtotal, delBtns, totoalNum, totalPrice, Append, number) {
        this.oBtn = btns;
        this.oDoodsNum = goodsNum;
        this.oSubtotal = subtotal;
        this.oDelBtns = delBtns;
        this.oTotoalNum = totoalNum;
        this.oTotalPrice = totalPrice;
        this.oAppend = Append;
        this.onumber = number;
        this.enent();
    }
    //更新货物数量
    dayup() {
        let tNum = 0;
        for (let i = 0; i < this.oDoodsNum.length; i++) {
            tNum += this.oDoodsNum[i].innerHTML / 1
        }
        this.oTotoalNum.innerHTML = tNum

        let topar = 0;
        for (let i = 0; i < this.oSubtotal.length; i++) {
            topar += this.oSubtotal[i].innerHTML / 1
        }
        this.oTotalPrice.innerHTML = topar
    }
    addGoods(btn) {
        let oDoodsNum = btn.previousElementSibling;
        oDoodsNum.innerHTML = oDoodsNum.innerHTML / 1 + 1

        let ot = btn.parentNode.nextElementSibling.firstElementChild;
        let of = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
        of.innerHTML = oDoodsNum.innerHTML * ot.innerHTML
        this.dayup()
    }
    minGoods(btn) {
        let oDoodsNum = btn.nextElementSibling;

        if (oDoodsNum.innerHTML > 0) {
            oDoodsNum.innerHTML -= 1;

            let ot = btn.parentNode.nextElementSibling.firstElementChild;
            let of = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
            of.innerHTML = oDoodsNum.innerHTML * ot.innerHTML
            this.dayup()
        }
    }
    delGodds(btn) {
        let oTr = btn.parentNode.parentNode;
        oTr.remove();
        this.dayup()
    }
    append(shan) {
        let oNume = shan.parentNode.previousElementSibling.previousElementSibling;//臭鱼
        let oCost = shan.parentNode.previousElementSibling.firstElementChild;//单价
        let oTable = document.body.firstElementChild.firstElementChild;//tab
        let state = false;//列表是否存在
        let clickElement;
        for (const child of oTable.children) {//遍历所有tr
            let oldName = child.firstElementChild.innerHTML;
            if(oNume.innerHTML==oldName){
                console.log("已经存在，不用在创建显示");
                state =true;
                clickElement = child;
            }
        }
        if(!state){//说明没有，需要创建tr
            this.createElement(oNume,oCost,oTable);
        }else{//数量加
            let jia = clickElement.firstElementChild.nextElementSibling.lastElementChild;//找加号元素
            this.addGoods(jia);
        }
    this.dayup()
    this.enent();

    }

    createElement(oNume,oCost,oTable){
        let oS = oTable.lastElementChild;//最后一个
        let oTr = document.createElement("tr");
        oTr.innerHTML = `
        <td>${oNume.innerHTML}</td>
        <td>
            <button>-</button>
            <span class="goods-num">0</span>
            <button>+</button>
        </td>
        <td>单价
            <span>${oCost.innerHTML}</span>
        </td>
        <td>小计
            <span  class="subtotal">0</span>
        </td>
        <td>操作
            <input type="button" value="删除">
        </td>
    `;
     oTable.insertBefore(oTr, oS);
    }

    enent() {
        let that = this;
        for (let i = 0; i < this.oBtn.length; i++) {
            if (i % 2 == 1) {
                this.oBtn[i].onclick = function () {
                    that.addGoods(this)
                }
            } else {
                this.oBtn[i].onclick = function () {
                    that.minGoods(this)
                }
            }
        }
        for (let i = 0; i < this.oDelBtns.length; i++) {
            this.oDelBtns[i].onclick = function () {
                that.delGodds(this)
            }
        }
        for (let i = 0; i < this.oAppend.length; i++) {
            this.oAppend[i].onclick = function() {
                that.append(this);
            }
        }
    }
}