• 简易购物车删除商品数量


    京东前端笔试编程题:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户名验证</title>
    </head>
    <body>
    <table border="1" cellspacing="0px" cellpadding="10px">
        <thead>
        <tr>
            <td>名称</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>产品1</td>
                <td>10.00</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td>产品2</td>
                <td>30.20</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td>产品1</td>
                <td>20.50</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>总计</td>
            <td colspan="2">60.70(3件商品)</td>
        </tr>
        </tfoot>
    </table>
    </body>
    <script>
    //add 功能 items 为{name:string,price:number}组成的数组
    function add(items){
    var len = items.length;
    for(var i=0;i<len;i++){
    var tr = document.createElement('tr');
    tr.innerHTML= '<td>' + items[i].name + '</td><td>'
    + items[i].price.toFixed(2) +
    '</td><td><a href="javascript:void(0);">删除</a></td>';
    document.getElementsByTagName('tbody')[0].appendChild(tr);
    }
    changePrice();


    }
    //delete 功能
    function bind(){
    var tbody=document.getElementsByTagName('tbody')[0];
    tbody.onclick = function(event){
    var target = event.target || event.srcElement;
    if(target.innerHTML=="删除"){
    target.parentElement.parentElement.remove();
    changePrice();
    }

    }

    }
    function changePrice(){
    var tbody = document.getElementsByTagName('tbody')[0];
    var trList = tbody.children;
    var total = 0;
    for(var j=0;j<trList.length;j++){
    total += parseFloat(trList[j].children[1].innerHTML);

    }
    console.log(total,"jaja");
    document.getElementsByTagName('tfoot')[0].children[0].children[1].innerHTML = total.toFixed(2)+"("+trList.length+'件商品)';
    }
    </script> </html>

    这道题考察的知识点有:dom结构的增删改查、事件委托机制、数值类型的转化(parseFloat 、toFixed(num)、+可能表示是取正的意思 typeof +"123"  //"number"

  • 相关阅读:
    平时十二测
    无题十四
    暑假第十测
    无题十三
    noip错题集
    无题十二
    BZOJ整理
    志愿者招募
    修车
    任务安排
  • 原文地址:https://www.cnblogs.com/lihuijuan/p/9313727.html
Copyright © 2020-2023  润新知