增删商品计算价格

  • A+
所属分类:Web前端
<!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: 1xp solid;
            width: 800px;
        }
        th{
            background-color: lightsteelblue;
            border: 1px solid #fff;
        }
        td{
            background-color: #f0f0f0;
            border: 1px solid #fff;
            height: 30px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
    <script src="shopping.js"></script>
</head>
<body>
    <div>
        <form action="">
            <p>商品名称: <input type="text" id="itemTitle">  </p>
            <p>商品价格:<input type="text" id="itemPrice"> </p>
            <p>购买数量: <input type="text" id="itemNum"></p>
            <p><input type="button" value="添加" id="add"></p>
        </form>
    </div>
    <div>
        <h2>购物车</h2>
    </div>
    <div>
        <table id="itemList">
            <tr>
                <th><input type="checkbox"></th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>《JavaScript全面解毒,解不掉就毒死》</td>
                <td>18.0</td>
                <td>
                    <input type="button" value="-" name="decr">
                    <input type="text" style="width:20px" value="1">
                    <input type="button" value="+" name="incr">
                </td>
                <td name ="subTotal">18.0</td>
                <td>
                    <input type="button" value="删除" name="remBtn">
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>《JavaScript全面解毒,解不掉就毒死》</td>
                <td>18.0</td>
                <td>
                    <input type="button" value="-" name="decr">
                    <input type="text" style="width:20px" value="1">
                    <input type="button" value="+" name="incr">
                </td>
                <td name ="subTotal">18.0</td>
                <td>
                    <input type="button" value="删除" name="remBtn">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>《JavaScript全面解毒,解不掉就毒死》</td>
                <td>18.0</td>
                <td>
                    <input type="button" value="-" name="decr">
                    <input type="text" style="width:20px" value="1">
                    <input type="button" value="+" name="incr">
                </td>
                <td name ="subTotal">18.0</td>
                <td>
                    <input type="button" value="删除" name="remBtn">
                </td>
            </tr>
        </table>
    </div>
    <div style="text-align: right; margin-right: 50px; width: 800px; margin-top: 10px;
    border-top: 1px solid #ccc;" >总价:
        <span id="total">180.00</span>
        <input type="button" value="提交订单" id="orderBtn">
    </div>
</body>
</html>
//shopping.js
window.onload = function(){
    //页面加载完成立刻执行
    getTotal();
    //给所有的减按钮绑定事件
    bindDecr();
    //给所有的加按钮绑定事件
    bindIncr();
    //给添加商品的按钮绑定事件
    bindAdd();
    //给提交订单的按钮绑定事件
    document.getElementById("orderBtn").onclick = function(){
        //取到所有的复选框,表头的不算
        var cks = document.querySelectorAll("td [type = 'checkbox']");
        //遍历计算总价
        var total = 0;
        for(var x = 0;x < cks.length;x++){
            if(cks[x].checked){
                //被选中的复选框,取出这一行所有的td中的第5个小计的值
                var td = cks[x].parentElement.parentElement.children[4];
                //取出小计的值
                total += parseInt(td.innerText);
            }  
        }
        alert("订单总价为:"+total);
    }
}
//给添加商品的按钮绑定事件
function bindAdd(){
    var addBtn = document.getElementById("add");
    addBtn.onclick = function(){
        //取出三个文本框
        var itemTitleDom = document.getElementById("itemTitle");
        var itemPriceDom = document.getElementById("itemPrice");
        var itemNumDom = document.getElementById("itemNum");
        var tableDom = document.getElementById("itemList");
        //生成tr
        var tr = document.createElement("tr");
        //checkbox
        var td1 = document.createElement("td");
        var ip1 = document.createElement("input");
        ip1.type = "checkbox";
        td1.append(ip1);
        tr.append(td1);
        //名称
        var td2 = document.createElement("td");
        td2.append(itemTitleDom.value);
        tr.append(td2);
        //价格
        var td3 = document.createElement("td");
        td3.append(itemPriceDom.value);
        tr.append(td3);
        //数量
        var td4 = document.createElement("td");
        var ip4 = document.createElement("input");
        var btn1 = document.createElement("input");
        var btn2 = document.createElement("input");
        btn1.type = "button";
        btn1.value = "-";
        btn1.name = "decr";
        td4.append(btn1);
        ip4.type = "text";
        ip4.style.width = "20px";
        ip4.value = itemNumDom.value;
        td4.append(ip4);
        btn2.type = "button";
        btn2.value = "+";
        btn2.name = "incr";
        td4.append(btn2);
        tr.append(td4);
        //小计
        var td5 = document.createElement("td");
        td5.setAttribute("name","subTotal");
        tr.append(td5);
        //操作
        var td6 = document.createElement("td");
        var ip6 = document.createElement("input");
        ip6.type = "button";
        ip6.value = "删除";
        td6.append(ip6);
        tr.append(td6);
        //给这个删除按钮直接绑定事件
        ip6.onclick = function(){
            //删除整行,前三个不是动态生成的不能删除
            ip6.parentElement.parentElement.remove();
            //重新计算总价
            getTotal();
        }
        //将tr加入table
        tableDom.append(tr);
        //计算小计
        getSubTotal(ip4);
        //计算总价
        getTotal();
        //减按钮绑定
        bindDecr();
        //加按钮绑定
        bindIncr();
    }
}
//定义一个函数计算总价
function getTotal(){
    //找到所有小计的td
    var tds = document.querySelectorAll("[name='subTotal']");
    var total = 0;
    //遍历数组,计算总价
    for(var x = 0;x < tds.length;x++){
        total += parseFloat(tds[x].innerText);
    }
    //将总价写入对应的span
    document.getElementById("total").innerText = total;
}
//定义一个函数计算小计
// numDom 这里需要传入输入框的DOM对象本身
function getSubTotal(numDom){  
    //取出当前的数量
    var num = numDom.value;
    //取出价格
    var tdBtns = numDom.parentElement; //取出父元素td
    var price = parseFloat(tdBtns.previousElementSibling.innerText);//td的前一个兄弟节点就是价格
    //计算小计
    var subTotal = num * price;
    //将小计写入后面  td的下一个兄弟元素节点
    tdBtns.nextElementSibling.innerText = subTotal;
}
//定义一个函数给减按钮添加事件
function bindDecr(){
    //找到所有的减按钮
    var decrBtns = document.querySelectorAll("[name = 'decr']");
    //遍历DOM数组,逐个绑定事件
    for(var x = 0;x < decrBtns.length;x++){
        //解绑之前的事件,decrBtns[x]表示每一个
        decrBtns[x].onclick = null;
        //重新绑定事件
        decrBtns[x].onclick = function(){
            //这里的this就表示当前按钮本身,取出输入框对象
            var inputDom =  this.nextElementSibling;
            //取出值判断是否已经等于1了
            if(inputDom.value > 1){
                inputDom.value = inputDom.value - 1;
                //重新计算小计
                getSubTotal(inputDom);
                //重新计算总价
                getTotal();
            }
        }
    }
}
//定义一个函数给加按钮添加事件
function bindIncr(){
    //找到所有的减按钮
    var incrBtns = document.querySelectorAll("[name = 'incr']");
    //遍历DOM数组,逐个绑定事件
    for(var x = 0;x < incrBtns.length;x++){
        //解绑之前的事件,incrBtns[x]表示每一个
        incrBtns[x].onclick = null;
        //重新绑定事件
        incrBtns[x].onclick = function(){
            //这里的this就表示当前按钮本身,取出输入框对象
            var inputDom =  this.previousElementSibling;
            //取出值 加按钮不用判断
                inputDom.value = parseInt(inputDom.value)+ 1;
                //重新计算小计
                getSubTotal(inputDom);
                //重新计算总价
                getTotal();
        }
    }
}