题解 | #表格排序#
表格排序
https://www.nowcoder.com/practice/a23d261947194d5d8e2687aa873d96e4
思路：首先将html中的tbody表格以对象数组的形式存储起来，即外部结构是数组，内部元素是对象，然后再对数组进行排序即可。首先获取tbody，然后获取tbody中的所有tr，接着获取tr中的所有td，再对td进行处理即可得到对象，再将各个对象加入数组中即可。
<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>
<script type="text/javascript">
function sort(type, order)
{
//将列表存储为对象数组 再利用数组排序
var tbody = document.getElementById('jsList'); // 获取<tbody>元素
var rows = tbody.getElementsByTagName('tr'); // 获取所有<tr>元素
var arr=[]
for (var i = 0; i < rows.length; i++)
{
var tds = rows[i].getElementsByTagName('td'); // 获取当前行下的所有<td>元素
// 分别提取每个<td>元素的内容 并转换为数字
var td1 = Number(tds[0].innerText); // 第一个<td>
var td2 = Number(tds[1].innerText); // 第二个<td>
var td3 = Number(tds[2].innerText); // 第三个<td>
var obj={}
obj["id"]=td1
obj["price"]=td2
obj["sales"]=td3
//注意这个关键 直接将原数组也作为一个元素 这样排序其他key时 按照key排序后 直接索引tr即可
obj["tr"]=rows[i]
arr.push(obj)
}
arr.sort(function(a,b){
if(order==='asc')
return a[type]-b[type]
else if(order==='desc')
return b[type]-a[type]
})
tbody.innerHTML = ''
arr.forEach(item => {
tbody.appendChild(item["tr"]);
})
return arr
}
sort('sales','asc')
</script>
总结：注意这个关键，直接将原数组元素tr也作为一个元素存储在对象元素中，这样排序其他key时，按照key排序后，直接索引tr即可获得对应的tr。arr.sort函数是直接在原数组上排序。这个牛客js可以通过。。。
<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>
<script type="text/javascript">
//将列表存储为对象数组 再利用数组排序
var tbody = document.getElementById('jsList'); // 获取<tbody>元素
var rows = tbody.getElementsByTagName('tr'); // 获取所有<tr>元素
var arr=[]
for (var i = 0; i < rows.length; i++) {
var tds = rows[i].getElementsByTagName('td'); // 获取当前行下的所有<td>元素
// 分别提取每个<td>元素的内容 并转换为数字
var td1 = Number(tds[0].innerText); // 第一个<td>
var td2 = Number(tds[1].innerText); // 第二个<td>
var td3 = Number(tds[2].innerText); // 第三个<td>
var obj={}
obj["id"]=td1
obj["price"]=td2
obj["sales"]=td3
arr.push(obj)
}
function sort(type, order)
{
var res = arr.sort(function(a,b){
if(order==='asc')
return a[type]-b[type]
else if(order==='desc')
return b[type]-a[type]
})
render(res)
}
function render(res)
{
var str=''
res.map(item=>{
str+=`<tr><td>${item.id}</td><td>${item.price}</td><td>${item.sales}</td></tr>`
})
tbody.innerHTML=str
}
sort('sales','asc')
</script>
</body>
总结：这个是可以满足题目要求的，但是牛客js报错。。。
#表格排序#前端js面试 文章被收录于专栏
前端js面试，帮助你更好的理解js。
查看7道真题和解析
