简易购物车删除商品数量

京东前端笔试编程题：

<!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"）

简易购物车删除商品数量

猜你喜欢