首页 > 试题广场 >

表格排序

[编程题]表格排序

热度指数：5914 时间限制：C/C++ 2秒，其他语言4秒空间限制：C/C++ 256M，其他语言512M
算法知识视频讲解

系统会在tbody中随机生成一份产品信息表单，如html所示。
请完成 sort 函数，根据参数的要求对表单所有行进行重新排序。
1、type为id、price或者sales，分别对应第1 ~ 3列
2、order为asc或者desc，asc表示升序，desc为降序
3、例如 sort('price', 'asc') 表示按照price列从低到高排序
4、所有表格内容均为数字，每一列数字均不会重复
5、不要使用第三方插件

算法知识视频讲解

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)

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)

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)

HTML/CSS/JavaScript

huaxifn

function sort(type, order) {
    
    var tbody = document.querySelector('tbody');
    var colarr = ['id','price','sales'];
    let col = colarr.indexOf(type);
    let arr = Array.from(tbody.children);
    
    arr = arr.sort((a,b)=>{
        if(order=='desc'){ //升序
            return parseFloat(b.children[col].innerHTML) - parseFloat(a.children[col].innerHTML)
        }else if(order=='asc'){ //降序
            return parseFloat(a.children[col].innerHTML) - parseFloat(b.children[col].innerHTML)
        }
    })
    arr.forEach(el=>{
        tbody.append(el);
    })
}

发表于 2022-02-16 18:15:47 回复(0)

HTML/CSS/JavaScript

牛客853840090号

function sort(type, order) {
            var tbody = document.getElementById("jsList");
            var trContent = tbody.getElementsByTagName("tr");
            var arr = [];
            for (var i = 0; i < trContent.length; i++) {
                let tdContent = trContent[i].getElementsByTagName("td");
                let obj = {};
                obj.id = "" + tdContent[0].innerHTML;
                obj.price = Number(tdContent[1].innerHTML).toFixed(2);
                obj.sales = Number(tdContent[2].innerHTML);
                arr.push(obj);
            }
            console.log(arr);

            var temp = arr.sort((a, b) => {
                //根据参数选择如何排序
                if (order === "asc") {
                    return a[type] - b[type];
                } else {
                    return b[type] - a[type];
                }
            });
            console.log(temp);

            var str = "";
            temp.map((item) => {
                //重新排序后渲染
                return (str += `<tr>
                    <td>${item.id}</td>
                    <td>${item.price}</td>
                    <td>${item.sales}</td>
                    </tr>`);
            });
            tbody.innerHTML = str;
        }

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

HTML/CSS/JavaScript

牛客93587150号

function sort(type, order) {

function todo(index=0,desc=false){

let trs = document.querySelectorAll('#jsList tr')

return Array.from(trs).sort((tr1,tr2)=>{

if(desc == true ){

return parseFloat(tr2.children[index].innerText) - parseFloat(tr1.children[index].innerText)

}else{

return parseFloat(tr1.children[index].innerText) - parseFloat(tr2.children[index].innerText)

}

})

}

let keys = ['id','price','sales'];

let tbody = document.querySelector('#jsList')

let res = todo(keys.indexOf(type),order=='desc')

tbody.innerHTML = ''

res.forEach(tr=>{

tbody.appendChild(tr)

})

}

Array.sort 实现

发表于 2022-01-11 15:24:31 回复(0)

HTML/CSS/JavaScript

牛客760559747号

function sort(type, order) {
let tbody = document.querySelector("#jsList")
let items = [].slice.call(tbody.getElementsByTagName('tr'),0)
let tds1,tds2
switch(type){
case 'id':
if(order=='asc'){
items.sort((a,b)=>{
tds1=[].slice.call(a.getElementsByTagName('td'))[0]
tds2=[].slice.call(b.getElementsByTagName('td'))[0]
return parseFloat(tds1.innerText)-parseFloat(tds2.innerText)
})
}else{
items.sort((a,b)=>{
tds1=[].slice.call(a.getElementsByTagName('td'))[0]
tds2=[].slice.call(b.getElementsByTagName('td'))[0]
return parseFloat(tds2.innerText)-parseFloat(tds1.innerText)
})
}
tbody.innerHTML=""
for(let i of items){
tbody.append(i)
}
break
case 'price':
if(order=='asc'){
items.sort((a,b)=>{
tds1=[].slice.call(a.getElementsByTagName('td'))[1]
tds2=[].slice.call(b.getElementsByTagName('td'))[1]
return parseFloat(tds1.innerText)-parseFloat(tds2.innerText)
})
}else{
items.sort((a,b)=>{
tds1=[].slice.call(a.getElementsByTagName('td'))[1]
tds2=[].slice.call(b.getElementsByTagName('td'))[1]
return parseFloat(tds2.innerText)-parseFloat(tds1.innerText)
})
}
tbody.innerHTML=""
for(let i of items){
tbody.append(i)
}
break
case 'sales':
if(order=='asc'){
items.sort((a,b)=>{
tds1=[].slice.call(a.getElementsByTagName('td'))[2]
tds2=[].slice.call(b.getElementsByTagName('td'))[2]
return parseFloat(tds1.innerText)-parseFloat(tds2.innerText)
})
}else{
items.sort((a,b)=>{
tds1=[].slice.call(a.getElementsByTagName('td'))[2]
tds2=[].slice.call(b.getElementsByTagName('td'))[2]
return parseFloat(tds2.innerText)-parseFloat(tds1.innerText)
})
}
tbody.innerHTML=""
for(let i of items){
tbody.append(i)
}
break
}
}

发表于 2022-01-05 21:59:08 回复(0)

HTML/CSS/JavaScript

牛客291939938号

function sort(type, order) {
let tb = document.querySelector('tbody')
var arr = Array.from(tb.children)
var index = ['id', 'price', 'sales'].indexOf(type)

arr = arr.map(ele => {
return ele.children[index]
})
arr.sort((a, b) => {
var ele1 = parseFloat(a.innerText)
var ele2 = parseFloat(b.innerText)

if (order == 'asc') {
//低到高
return ele1 - ele2
} else if (order == 'desc') {
return ele2 - ele1
}
})
arr = arr.map(ele => {
return ele.innerText
})
// tb.innerHTML = ``
arr.forEach((ele, i) => {
tb.children[i].children[index].innerText = ele
})
}

我这个哪里错了我就奇怪了

发表于 2021-12-21 19:00:12 回复(0)

HTML/CSS/JavaScript

HGHGHG

function sort(type, order) {
  let tbody = document.getElementById('jsList')
  let trList = tbody.getElementsByTagName('tr')
  //   获取数据列表
  let dataArr = [].map.call(trList, function (tr) {
    let tdArr = tr.children
    return {
      id: tdArr[0].innerText,
      price: tdArr[1].innerText,
      sales: tdArr[2].innerText,
      tr: tr
    }
  })
  //   排序
  dataArr.sort(function (a, b) {
    if (order == 'asc') return a[type] - b[type]
    else if (order == 'desc') return b[type] - a[type]
    else return 0
  })
  //   重新插入
  let fragment = document.createDocumentFragment()
  for (let item of dataArr) {
    fragment.appendChild(item.tr)
  }
  tbody.appendChild(fragment)
}

发表于 2021-12-05 23:27:00 回复(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)

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)