利用js中的DOM结点实现伪购物车添加物品和减少物品并计算出总价

1.首先使用表格模拟购物车

html代码如下

<table border="1px">
        <thead>
            <tr>
                <td>商品名称</td>
                <td>单价</td>
                <td>数量</td>
                <td>合计</td>
                <td>操作</td>
            </tr>
        </thead>

        <tbody>
            <!-- 第一行 -->
            <tr>
                <td>iphone</td>
                <td>5000</td>
                <td>
                    <input type="button" value="-" class="down">
                    <input type="text" value="1">
                    <input type="button" value="+" class="add">
                </td>
                <td>5000</td>
                <td>
                    <input type="button" value="删除">
                </td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>华为</td>
                <td>4000</td>
                <td>
                    <input type="button" value="-" class="down">
                    <input type="text" value="1">
                    <input type="button" value="+" class="add">
                </td>
                <td>4000</td>
                <td>
                    <input type="button" value="删除">
                </td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>小米</td>
                <td>3000</td>
                <td>
                    <input type="button" value="-" class="down">
                    <input type="text" value="1">
                    <input type="button" value="+" class="add">
                </td>
                <td>3000</td>
                <td>
                    <input type="button" value="删除">
                </td>
            </tr>
        </tbody>
    </table>

在经过简单的css修饰可以得到一下效果

2.编写js代码为其添加增删功能

代码如下：

 // 先做添加功能
    // 1.获取到add标签,点击后添加
    var oAdd=document.querySelectorAll(".add");
    for(var i =0;i<oAdd.length;i++){
        oAdd[i].onclick=function(){
            // 每点击以及+按钮，实现数量中的数字+1
            var num=parseInt(this.previousElementSibling.value) ;
            num+=1;
            // 把重新得到的数字赋值给数量中的去
            this.previousElementSibling.value=num;

            // 2.计算出商品的总价
            //获取到数量上一级标签的前一个元素的内容,并用price接收
            var price=this.parentNode.previousElementSibling.innerText;
            //获取获取到数量上一级标签的后一个元素的内容,使其等于单价成数量
            this.parentNode.nextElementSibling.innerText=price*num;
        }
    }   

    // 再做减少功能
    var oDown=document.querySelectorAll(".down");
    for(var i =0;i<oAdd.length;i++){
        oDown[i].onclick=function(){
            // 每点击以及+按钮，实现数量中的数字+1
            var num=parseInt(this.nextElementSibling.value) ;
            num-=1;
            // 如果数量不小于0，把重新得到的数字赋值给数量中的去
            if(num>=0){
                this.nextElementSibling.value=num;
            }
            

            // 2.计算出商品的总价
            //获取到数量上一级标签的前一个元素的内容,并用price接收
            var price=this.parentNode.previousElementSibling.innerText;
            //获取获取到数量上一级标签的后一个元素的内容,使其等于单价成数量
            this.parentNode.nextElementSibling.innerText=price*num;
        }
    }