常见编程题 - 购物车增删统计

最新推荐文章于 2023-08-13 20:29:34 发布

不愿停

最新推荐文章于 2023-08-13 20:29:34 发布

阅读量352

点赞数

分类专栏：常见编程题

本文链接：https://blog.csdn.net/qq_41401130/article/details/82592169

版权

常见编程题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息
1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组
2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行
3、请注意同步更新统计信息，价格保留小数点后两位
4、列表和统计信息格式请与HTML示例保持一致
5、不要直接手动修改HTML中的代码
6、不要使用第三方库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,html{
           padding: 0;
            margin: 0;
            font-size: 14px;
            color: #000000;
        }
        table{
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }
        thead{
            background: #3d444c;
            color: #ffffff;
        }
        td,th{
            border: 1px solid #e1e1e1;
            padding: 0;
            height: 30px;
            line-height: 30px;
            text-align: center;
        } 
    </style>
</head>
<body>
    <table id="jsTrolley">
    <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
    <tbody>
        <tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
        <tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
        <tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
    </tbody>
    <tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>
<script type="text/javascript">
//增加
function add(items) {
    var tbody = document.querySelector('#jsTrolley tbody');
    var len = items.length;
    for(var i=0;i<len;i++) {
        var name = items[i].name;
        var price = items[i].price;
        var tr = document.createElement('tr');
        var td = '<td>'+name+'</td><td>'+price+'</td><td><a href="javascript:void(0);">删除</a></td>'
        tr.innerHTML = td;
        tbody.appendChild(tr);
        cal();
    } 

}
//时间监听-删除
function bind() {
    var tbody = document.querySelector('#jsTrolley tbody');
    var links = tbody.querySelectorAll('a');
    //委托事件
    tbody.addEventListener('click',function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        console.log(target.tagName);
        if(target.tagName !== 'A') {
            return;
        }
        tbody.removeChild(target.parentNode.parentNode);
        cal();
    })
}
//统计总价和总件数
function cal() {
    var total_price = 0;
    var trs = document.querySelectorAll('tbody tr');
    var total = trs.length;
    for(var j=0;j<total;j++) {
        total_price += parseFloat(trs[j].querySelectorAll('td')[1].innerText);
    }
    var tfoot = document.querySelector('#jsTrolley tfoot td');
    tfoot.innerText = total_price.toFixed(2)+'('+total+'件商品)';
}
var items = [{name: '4', price: '20.00'},{name: '5', price: '10.00'}]
add(items);
 bind();
</script>
</body>
</html>

不愿停

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常见编程题 - 购物车增删统计

HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息 1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组 2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行 3、请注意同步更新统计信息，价格保留小数点...
复制链接

扫一扫