DOM简易购物车实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-spacing:0;
            border:1px solid #aaa;
        }
        th,td{
            width:100px;
            border:1px solid #aaa;
        }
    </style>
</head>
<body>
<table id="data">
    <thead>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>iPhone6</td>
            <td>¥4488.00</td>
            <td>
                <button οnclick="calc(this)">-</button>
                <span>1</span>
                <button οnclick="calc(this)">+</button>
            </td>
            <td>¥4488.00</td>
        </tr>
        <tr>
            <td>iPhone6 plus</td>
            <td>¥5288.00</td>
            <td>
                <button οnclick="calc(this)">-</button>
                <span>1</span>
                <button οnclick="calc(this)">+</button>
            </td>
            <td>¥5288.00</td>
        </tr>
        <tr>
            <td>iPad Air 2</td>
            <td>¥4288.00</td>
            <td>
                <button οnclick="calc(this)">-</button>
                <span>1</span>
                <button οnclick="calc(this)">+</button>
            </td>
            <td>¥4288.00</td>
        </tr>
    <tfoot>
        <tr>
            <td colspan="3">总计</td>
            <td>¥14064.00</td>
        </tr>
    </tfoot>
</table>


<script>
    function calc(btn){ //事件发生时,btn中自动获得点击的按钮
        //修改数量
        //找到当前按钮btn的父节点,保存在td中
        var td=btn.parentNode;
        //在td下找唯一的一个span元素,保存在span中
        var span=td.getElementsByTagName("span")[0];
        //取出span的内容转为数字后保存到变量n中
        var n=parseInt(span.innerHTML);
        //如果当前按钮的内容是+,则n++
        if(btn.innerHTML==="+"){
            n++;
        }else if(n!=1){n--;}//否则,如果n!=1,n--
        //将n写入span的内容
        span.innerHTML=n;


        ///计算小计/
        //找当前td的父元素tr
        var tr=td.parentNode;
        //找tr下所有td,保存在变量tds中
        var tds=tr.getElementsByTagName("td");
        //取出tds中第二个td的内容,从1位置截取剩余字符串,转为小数,保存在price中
        var price=parseFloat(tds[1].innerHTML.slice(1));
        //计算price*n,保存到变量sub中
        var sub=price*n;
        //将“¥:”+sub.toFixed(2)写回tds中第四个td中
        tds[3].innerHTML="¥"+sub.toFixed(2);


        计算总计
        //按id找到table
        var table=document.getElementById("data");
        //找到table下的tbody
        var tbody=table.getElementsByTagName("tbody")[0];
        //找到tbody下的所有tr,保存在trs
        var trs=tbody.getElementsByTagName("tr");
        //遍历trs中每个tr,同时声明变量total=0
        for(var i=0,len=trs.length,total=0;i<len;i++){
        //  找到当前tr下的第四个td
            var td1=trs[i].getElementsByTagName("td")[3];
        //  取出td中的内容,从1位置截取剩余字符,转为小数,累加到total中
            total+=parseFloat(td1.innerHTML.slice(1));
        }//遍历结束后
        //找到table下的所有td,保存在tds中
        var tds1=table.getElementsByTagName("td");
        //将“¥;”+total.toFixed(2)放入tds中最后一个td中
        tds1[tds1.length-1].innerHTML="¥"+total.toFixed(2);
    }
</script>


</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值