表格排序_百度笔试题

freedom雲

这种题目给个函数怎么写啊
图片说明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<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>
</html>

<script>
  let list = document.getElementById('jsList')
  let arr = list.innerText.split('\n')
  arr = arr.map(item => {
    return item.replace(/\s+/g, ' ')
  })
  /*
    [
      0: "1 10.0 800"
      1: "2 30.0 600"
      2: "3 20.5 700"
      3: "4 40.5 500"
      4: "5 60.5 300"
      5: "6 50.0 400"
      6: "7 70.0 200"
      7: "8 80.5 100"
    ]
  */
  const objArr = []
  arr.forEach(item => {
    let propArr = item.split(' ')
    objArr.push({ id: propArr[0], price: propArr[1], sales: propArr[2] })
  })
  // 转换为
  /*
    0: {id: "1", price: "10.0", sales: "800"}
    1: {id: "3", price: "20.5", sales: "700"}
    2: {id: "2", price: "30.0", sales: "600"}
    3: {id: "4", price: "40.5", sales: "500"}
    4: {id: "6", price: "50.0", sales: "400"}
    5: {id: "5", price: "60.5", sales: "300"}
    6: {id: "7", price: "70.0", sales: "200"}
    7: {id: "8", price: "80.5", sales: "100"}
  */

  // sort
  // 按什么属性排序，asc / desc 升序/降序
  function sort (arr, prop, sortFunc) {
    arr.sort((obj1, obj2) => {
      if (sortFunc === 'asc') { // 升序
        if (obj1[prop] < obj2[prop]) {
          // 如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，
          // 如果第一个参数应该位于第二个之后则返回一个正数
          return -1 
        } else if (obj1[prop] > obj2[prop]) {
          return 1
        } else {
          return 0
        }
      } else if (sortFunc === 'desc') {
        if (obj1[prop] > obj2[prop]) {
          return -1
        } else if (obj1[prop] < obj2[prop]) {
          return 1
        } else {
          return 0
        }
      }
    })  
  }
  sort(objArr, 'sales', 'desc')
  console.log(objArr)
  // insert dom 
  /*
    <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>
  */
  let fragment = document.createDocumentFragment()
  objArr.forEach(item => {
    let tr = document.createElement('tr')
    let td1 = document.createElement('td')
    td1.innerHTML = item.id
    let td2 = document.createElement('td')
    td2.innerHTML = item.price
    let td3 = document.createElement('td')
    td3.innerHTML = item.sales
    tr.appendChild(td1)
    tr.appendChild(td2)
    tr.appendChild(td3)
    fragment.appendChild(tr)
  })
  list.innerHTML = ''
  list.appendChild(fragment)

</script>

发表于 2019-08-10 10:29:33 回复(0)

HTML/CSS/JavaScript

♈FourBrother✅已认证♉

这种题就离谱就是跑不过

function sort(type, order) {
    const tbody = document.getElementById("jsList")
    const children = [...tbody.children]
    const colMap = {
        id: 0,
        price: 1,
        sales: 2
    }
    children.sort((a, b) => {
        const aField = +a.children[colMap[type]].innerText
        const bField = +b.children[colMap[type]].innerText
        return order === 'asc' ? aField - bField : bField - aField 
    })
    children.forEach(item => tbody.append(item))
}

发表于 2021-11-29 14:57:44 回复(1)

一直都这样

发表于 2018-07-12 11:47:35 回复(3)

灯南_

function sort(type, order) {
    var map = ['id','price','sales'],
        parent = document.getElementById('jsList'),
        trs = parent.children,
        col = map.indexOf(type);
    [].slice.call(trs).sort(function(l,n){
        var lt = l.children[col].innerHTML,
            nt = n.children[col].innerHTML;
        return order == 'desc' ? lt < nt : lt > nt;
    }).map(function(el){
        parent.appendChild(el);
    });
}

编辑于 2018-07-20 16:37:48 回复(2)

HTML/CSS/JavaScript

球球你来个offer吧

实现了效果也不一定通过，可能原因是你用了 innerHTML 这样的方式创建了新的元素，测试样例中会比较是不是原来的元素的

 function sort(type, order) {
        var list = document.getElementById('jsList');
        var trs = list.getElementsByTagName('tr');
        var trsArr = [].slice.call(trs);
        var swObj = {
          id: 0,
          price: 1,
          sales: 2,
        };

        trsArr
          .sort(function (a, b) {
            var aVal = parseFloat(a.children[swObj[type]].innerHTML);
            var bVal = parseFloat(b.children[swObj[type]].innerHTML);
            return order === 'asc' ? aVal - bVal : bVal - aVal;
          })
          .forEach(function (tr) {
            list.appendChild(tr);
          });
}

发表于 2021-11-09 18:05:55 回复(2)

Sonder2

折腾了许久，发现最后这个题目要通过，需要注意的事项：

扩展运算符是无法识别的

function sort(type, order) {
    let bodyList = document.getElementById('jsList')
    let resultData = []

    for (let i = 0; i < bodyList.childNodes.length; i++)
        resultData.push({
            id: bodyList.childNodes.item(i).childNodes[0].textContent,
            price: bodyList.childNodes.item(i).childNodes[1].textContent,
            sales: bodyList.childNodes.item(i).childNodes[2].textContent,
            tr: bodyList.childNodes.item(i)
        })

    resultData
        .sort((min, max) => order === 'asc' ? min[type] - max[type] : max[type] - min[type])
        .forEach(item => bodyList.appendChild(item.tr))
}

发表于 2023-09-18 16:55:29 回复(0)

PermissionDog

浏览器运行都返回true了就是不通过😅

发表于 2022-01-18 19:31:25 回复(1)

HTML/CSS/JavaScript

牛客822838084号

本地能过，不知道为啥这里过不了

function sort(type, order) {

发表于 2023-06-13 16:16:28 回复(0)

HTML/CSS/JavaScript

dengylccc

通过不了，挂个

function sort(type, order) {
      const tb = document.getElementsByTagName('tbody')[0];
      const arr = [].slice.call(tb.children);
      arr.sort((a, b) => {
        let mapA = {},
          mapB = {};
        [mapA['id'], mapA['price'], mapA['sales']] = [].slice.call(a.children).map(item => item.innerText);
        [mapB['id'], mapB['price'], mapB['sales']] = [].slice.call(b.children).map(item => item.innerText);
        return order === 'asc' ? mapA[type] - mapB[type] : mapB[type] - mapA[type]
      });
      tb.replaceChildren(...arr);
    }

发表于 2023-01-19 17:05:00 回复(0)

HTML/CSS/JavaScript

code_sl

function sort(type, order) {
      let tbody_el = document.querySelector('tbody');
      let tbody_trs = [].slice.call(document.querySelectorAll('tbody>tr'));
      let index = type === 'id' ? 0 : type === 'index' ? 1 : 2;
      let table_mes = []
      tbody_trs.forEach(t => {
        console.log(t.children[0].innerText)
        table_mes.push({ id: t.children[0].innerText, price: t.children[1].innerHTML, sales: t.children[2].innerHTML })
      })
      console.log(table_mes, '@@@@')
      table_mes.sort((a, b) => {
        if (order === 'asc') {
         return  a[type] - b[type]
        } else {
         return  b[type] - a[type]
        }
      })
      console.log(table_mes)
      tbody_el.innerHTML =  table_mes.reduce((v, t, i) => {
        return v += `<tr><td>${t.id}</td><td>${t.price}</td><td>${t.sales}</td></tr>`
      }, '')
}

发表于 2022-12-07 15:47:44 回复(0)

HTML/CSS/JavaScript

牛客459462904号

  function sort(type, order) {
    //type为id、price或者sales;   asc表示升序，desc为降序
    // 1.获取父节点
    var tbody = document.getElementById('jsList')
    // 2.获取数据--多少行数据
    var len = tbody.children.length
    // 3.遍历获取数组
    var domArr = []
    var typeNum = type == 'id' ? 0 : type == 'price' ? 1 : type == 'sales' ? 2 : ''
    for (let i = 0; i < len; i++) {
      domArr.push(tbody.children[i])
    }
    // 4.重新排列--js sort()
    domArr.sort((a, b) => {
      return order==='desc' ? (b.children[typeNum].innerHTML - a.children[typeNum].innerHTML) : 
                              (a.children[typeNum].innerHTML - b.children[typeNum].innerHTML)
    })
    // 5.更新节点
    domArr.forEach(item => {
      tbody.appendChild(item);
    })
  }

发表于 2022-10-10 19:42:18 回复(0)

HTML/CSS/JavaScript

不安于世

function sort(type, order) {
    let tr = Array.from(document.querySelector('tbody').children)
    tr.sort((a, b) => {
        switch (order) {
            case 'asc':
                switch (type) {
                    case 'id':
                        return a.children[0].innerHTML - b.children[0].innerHTML
                    case 'price':
                        return a.children[1].innerHTML - b.children[1].innerHTML
                    case 'sales':
                        return a.children[2].innerHTML - b.children[2].innerHTML
                }
            case 'desc':
                switch (type) {
                    case 'id':
                        return b.children[0].innerHTML - a.children[0].innerHTML
                    case 'price':
                        return b.children[1].innerHTML - a.children[1].innerHTML
                    case 'sales':
                        return b.children[2].innerHTML - a.children[2].innerHTML
                }
        }
    }).forEach(value => {
        document.querySelector('tbody').appendChild(value)
    })
}

发表于 2022-08-28 18:38:22 回复(0)

HTML/CSS/JavaScript

fineSnow

不是很懂，我这样的代码提交跑出来是null。但我自测的时候是true。不知道是哪出问题了

function sort(type, order) {
				let tbody=document.getElementById("jsList")			
				let trArr=tbody.getElementsByTagName("tr")  
				let arr=[...trArr]	
									// arr.prototype
				let pos= (type=="id"?0:type=="price"?1:type=="sales"?2:0)						
				arr.sort(function(a,b){
					let f1= parseFloat( a.cells[pos].innerText )
					let f2= parseFloat( b.cells[pos].innerText )					
					if(order=="desc") { return f2-f1 }				
					return f1-f2
				})
				
				tbody.innerHTML=""
				arr.forEach((ele)=>{
					tbody.appendChild(ele)
				})

发表于 2022-08-21 20:51:32 回复(1)

HTML/CSS/JavaScript

=小牛同学=

为啥测不通过呢

function sort(type, order) {

var tbody = document.querySelector("#jsList");

var trs = Array.from(document.querySelectorAll("#jsList tr"));

function sortType(type, order) {

if (order == "desc") {

trs.sort((a, b) => {

return (

b.innerText.split("\t")[type] * 1 -

a.innerText.split("\t")[type] * 1

);

});

} else if (order == "asc") {

trs.sort((a, b) => {

return (

a.innerText.split("\t")[type] * 1 -

b.innerText.split("\t")[type] * 1

);

});

}

switch (type) {

case "id":

sortType(0, order);

break;

case "price":

sortType(1, order);

break;

case "sales":

sortType(2, order);

break;

default:

break;

}

var str = "";

trs.forEach((item) => {

console.log(item.innerHTML);

str += `<tr>${item.innerHTML}</tr>`;

});

tbody.innerHTML = str;

}

发表于 2022-08-19 18:01:34 回复(0)

HTML/CSS/JavaScript

花落再无相伴

function sort(type, order) {
          let arr = [];
          // 获取所有的tr节点
          let allTrNodes = document.querySelectorAll("#jsList tr");
          // 以对象的形式存在arr里
          Array.from(allTrNodes).map((item) =>
            arr.push({
              id: +item.querySelectorAll("td")[0].innerText,
              price: +item.querySelectorAll("td")[1].innerText,
              sales: +item.querySelectorAll("td")[2].innerText,
            })
          );
          // 排序函数 arr:对象的数组，order:排序方式(asc,desc)，key:排序依据(id,price,sales)
          function sortArr(arr, order, key) {
            if (order === "asc") return arr.sort((a, b) => a[key] - b[key]);
            return arr.sort((a, b) => b[key] - a[key]);
          }
          arr = sortArr(arr, order, type);

          if (arr.length) {
            // 清空原节点
            allTrNodes.forEach((item) =>
              document.querySelector("#jsList").removeChild(item)
            );
            //   产生新的节点
            for (const key in arr) {
              const tr = document.createElement("tr");
              tr.innerHTML = `<tr><td>${arr[key].id}</td><td>${arr[key].price}</td><td>${arr[key].sales}</td></tr>`;
              document.querySelector("tbody").appendChild(tr);
            }
          }
        }

实现了但通过不了

发表于 2022-08-15 17:49:46 回复(0)

牛客327257497号

 function sort(type, order) {
    var list = document.getElementById('jsList')

    var typeObj = {
      id: 0,
      price: 1,
      sales: 2
    }

    Array.from(list.children)
      .sort((a, b) => {
        return (
          (a.children[typeObj[type]].innerHTML -
            b.children[typeObj[type]].innerHTML) *
          (order == 'asc' ? 1 : -1)
        )
      })
      .forEach(function (tr) {
        list.appendChild(tr)
      })
  }

发表于 2022-07-26 15:21:07 回复(0)

尹木星辰

//抄的，写点注释，生活不易菜狗叹气
function sort(type, order) {
    //获取到type的索引值
    let col = ['id','price','sales'].findIndex(item => item === type)
    //把HTMLCollection对象变为数组，比较关键，[].slice.call应该也可以
    let trs =Array.from(document.getElementById("jsList").children);
    //调用数组的sort
    trs.sort((a, b) => {
        //用前面获取的type的索引值访问相应的值
        let v1 = parseFloat(a.children[col].innerHTML);
        let v2 = parseFloat(b.children[col].innerHTML);
        //排序
        return order === "asc" ? v1 - v2 : v2 - v1;
    });
    //获取节点
    let tbody = document.getElementById("jsList");
    //回填节点更新页面
    tbody.innerHTML = "";
    trs.forEach(tr => {
        tbody.appendChild(tr);
    });
}

发表于 2022-07-15 11:32:34 回复(0)

HTML/CSS/JavaScript

路过的一名白的不能再白的小白

function sort(type, order) {
    let listIndex = ['id','price','sales'].indexOf(type),
        listEl = document.querySelectorAll('#jsList tr'),
        jsList = document.querySelector('#jsList')
    // 将NodeList结构转化成数组，方便后续的操作
    let arr = Array.from(listEl)
    // 使用sort进行排序
    arr.sort((a,b)=>{
        return order === 'asc' ? a.childNodes[listIndex].innerText - b.childNodes[listIndex].innerText : b.childNodes[listIndex].innerText - a.childNodes[listIndex].innerText
    })
    // 清空表格原来的数据
    jsList.innerHTML = ''
    // 重新循环添加排序之后的数据
    arr.forEach(item=>{
        jsList.appendChild(item)
    })
}

发表于 2022-07-12 11:22:23 回复(0)

晓晨学前端

我也是参考楼上写的，自己琢磨写的，稍微有点冗余，可以使用三目运算符更加简洁

function sort(type, order) {

//获取父节点

var tbody = document.getElementById('jsList')

//获取多少行

var len = tbody.children.length

//创建一个放行数据的数组

let arr = []

//将行数据放到数组中

for (let i = 0; i < len; i++) {

arr.push(tbody.children[i])

}

//定义一个变量获取用户输入的type

let num = 0

//判断用户输入的type

if (type == 'id') {

num = 0

} else if (type == 'price') {

num = 1

} else if (type == 'sales') {

num = 2

} else {

alert('您输入的参数1不符合要求')

}

//判断用户输入的order

if (order == 'desc') {

arr.sort((a, b) => {

return b.children[num].innerHTML - a.children[num].innerHTML

})

} else if (order == 'asc') {

arr.sort((a, b) => {

return a.children[num].innerHTML - b.children[num].innerHTML

})

} else {

alert('您输入的参数二不符合要求')

}

//将数组每一项重新插入到tbody中

arr.forEach(item => {

tbody.appendChild(item)

})

}

发表于 2022-04-21 17:13:52 回复(0)

HTML/CSS/JavaScript

明年做玛丽姐

    for(let child of all.children){
        var obj={}
        obj.id=child.firstChild.innerText
        obj.price=parseFloat(child.children[1].innerText).toFixed(1)
        obj.sales=parseInt(child.lastChild.innerText)
        objArr.push(obj)
    }
    objArr=objArr.sort(function(a,b){
        if(order=='asc')
            return a[type]-b[type]
        else{
            return b[type]-a[type]
            }
    })
    let newText=''
    for(let item of objArr){
        newText+='<tr><td>'+item.id+'</td><td>'+item.price+'</td><td>'+item.sales+'</td></tr>'
    }
    all.innerHTML=newText
}
sort('slaes','asc')

发表于 2022-03-07 22:46:53 回复(0)

表格排序

问题信息

热门推荐

通过挑战的用户

相关试题