【京东2018秋招前端工程师】编程题-表格操作

最新推荐文章于 2024-08-17 12:42:41 发布

SuperYuHuoFei

最新推荐文章于 2024-08-17 12:42:41 发布

阅读量473

点赞数

本文链接：https://blog.csdn.net/SuperYuHuoFei/article/details/77900440

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【京东2018秋招前端工程师】编程题-表格操作</title>
    <style>
        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>
    <script>
        function add(items) {
            var tb=document.getElementById('jsTrolley'); // 表格
            var tbd=tb.getElementsByTagName('tbody')[0]; // 表格body
            var tr,td1,td2,td3;
            // 逐行向tbody里插入新商品
            for(var i=0;i<items.length;i++){
                var item=items[i];
                tr=tbd.insertRow();
                //tb.insertBefore(tr,tb.tFoot);

                td1=tr.insertCell();
                td2=tr.insertCell();
                td3=tr.insertCell();
                td1.innerHTML=item.name;
                td2.innerHTML=parseFloat(item.price).toFixed(2);
                td3.innerHTML='<a href="javascript:void(0);">删除</a>';
            }

            // 更新最后一行
            resetLastRow(tb,tbd);

            bind(); // 重新给所有行添加事件
        }

        function bind() {

            var tb=document.getElementById('jsTrolley'); // 表格
            var tbd=tb.getElementsByTagName('tbody')[0]; // 表格body

            // 为每个<a>标签添加一个click事件
            var a=document.getElementsByTagName('a');
            for(var i=0;i<a.length;i++){
                // 注意：此处不要用addEventListener方法来绑定事件，因为会绑定多个事件。
                //a[i].addEventListener('click',handlerFun);
                // 而onclick的方法会把前面的事件覆盖掉，从而在添加新元素后重新绑定事件时不会发生混乱。
                a[i].οnclick=handlerFun;
            }

            // 事件处理函数（闭包）
            function handlerFun(e) {
                var ev=e||window.event;
                var target=ev.target||ev.srcElement;
                // 获取此行并删去
                var tr=target.parentNode.parentNode;
                tb.deleteRow(tr.rowIndex);
                // 更新最后一行
                resetLastRow(tb,tbd);
            }

        }

        function resetLastRow(tb,tbd) {
            // 重新计算商品总价值
            var value=0;
            for(var j=0;j<tbd.rows.length;j++){
                value+=parseFloat(tbd.rows[j].cells[1].innerHTML);
            }
            // 更新最后一行（【总计】）
            var cnt=tbd.childElementCount;
            tb.tFoot.getElementsByTagName('td')[0].innerHTML=value.toFixed(2)+'('+cnt+'件商品)';
        }

    </script>
</head>
<body οnlοad="bind()">
<input type="button" value="添加商品" οnclick="add([{name:333,price:45},{name:444,price:25.3}])">
<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>