search

Seasons123 / blog-FE

web前端相关issue is my blog :lollipop:
2 stars 0 forks source link

2018京东笔试编程：完善JavaScript，实现删除一行，增加一行，计算总量。不能改动给出的html。 #70

Closed Seasons123 closed 6 years ago

Seasons123 commented 6 years ago

已给出的代码：

<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() {     
        }
        function bind() {
        }
    </script>
<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>

image

Seasons123 commented 6 years ago

我做的并没有ac，因为交了卷才发现window.onload时w一不小心大写了。分享一下，给自己攒点人品。下面是我的解答：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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;
        }
        .la{
            border-collapse: collapse;
            width: 100%;
        }
    </style>
    <script>
        var data=[
            {name:'产品4',price:10.00,operation:''},
            {name:'产品5',price:20.02,operation:''},
            {name:'产品6',price:40.10,operation:''},
            {name:'产品7',price:30.04,operation:''}
        ];

        function binder(x){
            return  '<tr><td class="name">'+data[x].name+
                '</td><td class="price">'+data[x].price+
                '</td><td class="operation"><a href="javascript:void(0);" class="add">'+data[x].operation+
                '</a></td></tr>';

        }
        var table= document.createElement('table');
        var item=[],i;
        for( i=0;i<data.length;i++){
            data[i].operation='增加';
            item[i]=binder(i);  //利用闭包
        }

        table.innerHTML=item;
        table.id="anotherTable";

        function add() {
            var addList= document.getElementsByClassName("add");
            for(i=0;i<addList.length;i++){
                addList[i].onclick=function(){
                    if(this.parentNode.parentNode.parentNode.parentNode.id!='jsTrolley') {
                        this.text = '删除';
                        //alert(i+4);拿到整行tr节点：this.parentNode.parentNode
                        var jsTrolley = document.getElementById('jsTrolley');
                        jsTrolley.children[1].insertBefore(this.parentNode.parentNode, jsTrolley.children[1].firstElementChild); //这是增加到最前面，使用这个也可以
                        //jsTrolley.appendChild(this.parentNode.parentNode); //这是增加到最后面
                        sum();
                    }else{
                        bind();
                    }
                };
            }

        }

        function bind() {
            var jsTrolley= document.getElementById('jsTrolley');
            var arrA=document.getElementsByTagName("a");
            for(i=0;i<arrA.length;i++){
                arrA[i].onclick=function( ){
                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    sum();
                };
            }
        }

        function sum(){
            var sum =0;
            var num=0;
            var childs=document.getElementsByTagName("tfoot")[0].childNodes.item(0).childNodes;
            //alert(childs.length);
            var arrA=document.getElementsByTagName("a");
            for(i=0;i<arrA.length;i++){
                if(arrA[i].parentNode.parentNode.parentNode.parentNode.id=='jsTrolley') {
                    num++;
                    var price = arrA[i].parentNode.parentNode.childNodes.item(1).innerHTML;
                    sum = sum + Number(price);
                }
            }
            sum=Number(sum).toFixed(2);
            childs[1].innerHTML=sum+'('+num+'件商品)';
        }

        window.onload = function () {
            bind();
            document.body.appendChild(table);
            add();//注意顺序，必须先document.body.appendChild(table)，渲染出table来，再执行add函数
            sum();

        };

    </script>

</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>
</body>

</html>
Seasons123 commented 6 years ago

关键知识点：如何实现在HTML页面加载完毕后运行某个js 我在head中加载了js，导致我js中的document.getElementsTagName方法失效。因为html中是按顺序读取运行的，那么head中的js是无法获取后者body中的元素，导致document.getElementById 找不到相应的标签对象，自然没法执行之后的方法（function）了。

解决方案： 1、把js文件放在html的最后面。这个方法简单粗暴，但是代码看上去显得有点凌乱，一般我们习惯在head中加载所需的全部js、css等。所以建议用后者方法。 2、在js中的把需要最后执行的代码套一个window.onload = function () {...}