练习牛客网笔试题--前端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]);
}
}