校招编程题目(2) JavaScript：购物车操作(京东)

最新推荐文章于 2022-03-12 19:05:53 发布

热爱改名阿呆呆

最新推荐文章于 2022-03-12 19:05:53 发布

阅读量702

点赞数

分类专栏：笔试前端 javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/Jingle_cjy/article/details/77918899

版权

前端同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

笔试

4 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

题目描述

给出html和css代码，实现了一个购物车界面如下：
界面效果
要求实现以下两个函数(不允许使用任何库)：
1. function add(items){}：在列表后面添加items商品信息，items为{name:String, price:Number}所组成的数组。
2. function bind()：点击每一行的删除，从列表中删除对应的行。
注意同步更新统计信息，price精确到小数点后两位。

给出的html代码如下：

<!DOCTYPE html>
<html lang="en">
<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>
</body>
</html>

给出的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;
}

我的答案

/*
// 代码测试
window.onload = function(){
    add([{name: 'test1', price: 11.223}, {name: 'test2', price: 2.333}]);
    bind();
}*/
function add(items) {
    if(items.length==0) return;
    for(var i=0; i<items.length; i++){
        var item = items[i];

        var newLine = document.createElement('tr');
        var firstCol = document.createElement('td');
        var pName = document.createTextNode(item['name']);
        firstCol.appendChild(pName);
        newLine.appendChild(firstCol);

        var secondCol = document.createElement('td');
        var pPrice = document.createTextNode(item['price'].toFixed(2));
        secondCol.appendChild(pPrice);
        newLine.appendChild(secondCol);

        var thirdCol = document.createElement('td');
        var link = document.createElement('a');
        link.href = "javascript:void(0);";
        link.innerHTML = "删除";
        thirdCol.appendChild(link);
        newLine.appendChild(thirdCol);

        var tbody = document.getElementsByTagName("tbody")[0];
        tbody.appendChild(newLine);

        updateSum(true, item['price'].toFixed(2));
    }
    //bind(); // 若出错，可以防止调用add后不调用bind绑定事件
}

function bind() {
    // 为每个链接绑定事件
    var links = document.getElementsByTagName("a");
    for(var i=0; i<links.length; i++){
        links[i].addEventListener("click", deleteRow);
    }

    // 删除一行
    function deleteRow(e){
        // 首先得到对应的行元素tr
        var tr = e.target.parentNode.parentNode;
        // 先获得商品的价格用以更新统计信息
        var price = parseFloat(tr.childNodes[1].childNodes[0].nodeValue);
        updateSum(false, price.toFixed(2));

        // 删除tr
        tr.parentNode.removeChild(tr);
    }
}

// 更新统计信息
function updateSum(add, price) { // add=true表示添加，false表示删除
    var sign = add?1:-1;
    var sum = document.getElementsByTagName("tfoot")[0].childNodes[0].childNodes[1];
    var matcher1 = new RegExp("([0-9]*\\.[0-9][0-9])"); // 修改总价
    sum.innerHTML.match(matcher1);
    var newSum = sum.innerHTML.replace(matcher1, (parseFloat(RegExp.$1)+sign*parseFloat(price)).toFixed(2));
    var matcher2 = new RegExp("\\(([0-9]*)"); // 修改物品数目
    newSum.match(matcher2);
    newSum = newSum.replace(matcher2, "("+(parseInt(RegExp.$1)+sign));
    sum.innerHTML = newSum;
}