练习牛客网笔试题--前端js--57-表格排序

最新推荐文章于 2022-09-04 22:03:24 发布

Suuuuuuuuummer

最新推荐文章于 2022-09-04 22:03:24 发布

阅读量270

点赞数 1

本文链接：https://blog.csdn.net/Lsvmmer/article/details/117250519

版权

练习牛客网笔试题--前端js--57-表格排序

// 题目描述

// 系统会在tbody中随机生成一份产品信息表单，如html所示。

// 请完成 sort 函数，根据参数的要求对表单所有行进行重新排序。

// 1、type为id、price或者sales，分别对应第1 ~ 3列

// 2、order为asc或者desc，asc表示升序，desc为降序

// 3、例如 sort('price', 'asc') 表示按照price列从低到高排序

// 4、所有表格内容均为数字，每一列数字均不会重复

// 5、不要使用第三方插件

1.自己的练习

<body>
    <table>
        <thead>
            <tr><th>id</th><th>price</th><th>sales</th></tr>
        </thead>
        <tbody id="jsList">
            <tr><td>1</td><td>10.0</td><td>800</td></tr>
            <tr><td>2</td><td>30.0</td><td>600</td></tr>
            <tr><td>3</td><td>20.5</td><td>700</td></tr>
            <tr><td>4</td><td>40.5</td><td>500</td></tr>
            <tr><td>5</td><td>60.5</td><td>300</td></tr>
            <tr><td>6</td><td>50.0</td><td>400</td></tr>
            <tr><td>7</td><td>70.0</td><td>200</td></tr>
            <tr><td>8</td><td>80.5</td><td>100</td></tr>
        </tbody>
    </table>
</body>

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

    //1. 学习题解后写的，牛客网提交能通过，但是跟题解的运行时间、占用内存都不能比
    function sort(type, order) {
        if(type == "id"){
            type = 0;
        }else if(type == "price"){
            type = 1;
        }else if(type == "sales"){
            type = 2;
        };
        var tbody = document.querySelector('tbody');
        var body_tr = tbody.querySelectorAll('tr');
        var arr_tr = [...body_tr];
        // var arr_tr = Array.prototype.slice.call(body_tr); 
        arr_tr.sort(function(a, b) {
            var td1 = a.children[type].innerHTML;
            var td2 = b.children[type].innerHTML;
            if(order === 'asc') {
                return td1 - td2;
            } else if(order === 'desc') {
                return td2 - td1;
            }
        });
        arr_tr.forEach(item => tbody.appendChild(item));
    }

    // 2. 学习题解前写的，想的太复杂了，牛客网提交未能通过，但是能满足题目的要求
    function sort(type, order) {
        var tbody = document.querySelector('tbody');
        var body_tr = tbody.querySelectorAll('tr');
        var thead = document.querySelector('thead');
        var head_tr = thead.querySelector('tr');

        var data = [];
        for(var i = 0; i < body_tr.length; i++) {
            data[i] = {};
            data[i][head_tr.children[0].innerHTML] = body_tr[i].children[0].innerHTML;
            data[i][head_tr.children[1].innerHTML] = body_tr[i].children[1].innerHTML;
            data[i][head_tr.children[2].innerHTML] = body_tr[i].children[2].innerHTML;
        }

        result = arraySort(data, type, order);
        var newTbody = initTbody(result);
        tbody.innerHTML = newTbody.innerHTML;
    }

    // 初始化数据
    function initTbody(data) {
        var tbody = document.createElement('tbody');
        var tag = '';
        for(var i = 0; i < data.length; i++) {
            tag += '<tr>'
                + '<td>' + data[i].id + '</td>'
                + '<td>' + data[i].price + '</td>'
                + '<td>' + data[i].sales + '</td>'
                + '</tr>';
            }
        tbody.innerHTML = tag;
        return tbody;
    }

    // 数组排序
    function arraySort(data, type, order) {
        // 需要被排序的数组 data
        // 对需要排序的数字和位置的临时存储
        var mapped = data.map(function(el, i) {
            return { index: i, value: el[type] };
        })
        // 按照多个值排序数组
        mapped.sort(function(a, b) {
            if(order === 'asc') {
                return +(a.value > b.value) || +(a.value === b.value) - 1;
            } else if(order === 'desc') {
                return +(a.value < b.value) || +(a.value === b.value) - 1;
            }
        });
        // 根据索引得到排序的结果
        var result = mapped.map(function(el){
            return data[el.index];
        });

        return result;
    }

2.题解

    function sort(type, order) {
        var index = 0;
        if(type == "id"){
            index = 0;
        }else if(type == "price"){
            index = 1;
        }else if(type == "sales"){
            index = 2;
        }
        var jsList = document.getElementById("jsList");
        var trs = jsList.getElementsByTagName('tr');
        var arrTrs = Array.prototype.slice.call(trs);  // slice浅拷贝，返回一个新数组
        arrTrs.sort(function(value1,value2){
            var td1 = value1.getElementsByTagName('td')[index].innerHTML;
            var td2 = value2.getElementsByTagName('td')[index].innerHTML;
            if(order == "asc"){
                return td1-td2;
            }
            if(order == "desc"){
                return td2-td1;
            }
        });
        for(var i=0; i<arrTrs.length; i++){
            jsList.appendChild(arrTrs[i]);
        }
    }

Suuuuuuuuummer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习牛客网笔试题--前端js--57-表格排序

练习牛客网笔试题--前端js--57-表格排序//题目描述//系统会在tbody中随机生成一份产品信息表单，如html所示。//请完成sort函数，根据参数的要求对表单所有行进行重新排序。//1、type为id、price或者sales，分别对应第1~3列//2、order为asc或者desc，asc表示升序，desc为降序//3、例如sort('price','asc')表示按照price列从低到高排序...
复制链接

扫一扫