JavaScript 实现客户端购物车计算

实现客户端购物车的计算

　　效果图

 案例代码

 HTML代码

<!--购物车-->

<style>
    table {
        width: 600px;
        /*边框合并*/
        border-collapse: collapse;
        text-align: center;
    }

    th, td {
        border: 1px solid #000;
    }

    td[colspan="3"] {
        text-align: right;
    }

    table tr td:last-child{
        background: aquamarine;
    }

</style>

<table id="data">
    <thead>
    <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>iphone 6</td>
        <td>￥4300.00</td>
        <td>
            <button>-</button>
            <span>1</span>
            <button>+</button>
        </td>
        <td>￥4300.00</td>
    </tr>
    <tr>
        <td>iphone 6 Plus</td>
        <td>￥5200.00</td>
        <td>
            <button>-</button>
            <span>1</span>
            <button>+</button>
        </td>
        <td>￥5200.00</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">Total：</td>
        <td>￥9500.00</td>
    </tr>
    </tfoot>
</table>

<script src="mJS.js"></script>

JavaScript代码

// 1. 构建DOM树，
// 2. 查找触发事件的元素
//  找到table
var table = document.getElementById("data");
//  通过table找button
var btns = table.getElementsByTagName("button")
// 3. 绑定事件处理函数
// 遍历每一个 button
for (var i = 0, len = btns.length; i < len; i++) {
    // 为当前按钮绑定处理函数
    btns[i].onclick = function () {
        // this 只向当前触发的元素 button
        // 4. 查找要修改的元素 并修改
        var span = this.parentElement.getElementsByTagName("span")[0];
        // console.log(span)
        // 修改数量
        var n = parseInt(span.innerHTML);
        if (this.innerHTML == "+") {
            n++;
        } else if (n > 1) {
            n--;
        }
        span.innerHTML = n;

        // 修改小计
        // 获得用户单击按钮所在行的单价
        var price = this.parentElement.previousElementSibling.innerHTML;
        // 取出数字部分并转换为数字类型
        price = parseFloat(price.slice(1));
        var subTotal = (price * n).toFixed(2); // 保留两位小数
        // console.log(subTotal)
        // 修改小计
        this.parentElement.nextElementSibling.innerHTML = "￥" + subTotal;

        // 修改 总计
        // 找到 tbody 下所有行的最后一个 td
        var tds = table.querySelectorAll("tbody tr td:last-child");
        // console.log(tds)
        // 遍历集合
        var sum = 0;
        for (var i = 0; i < tds.length; i++) {
            // 取出数字，累加
            sum += parseFloat(tds[i].innerHTML.slice(1));
        }

        // 放到总计中
        table.querySelector('tfoot tr td:last-child').innerHTML="￥"+sum.toFixed(2);

    }
}