我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
互联网用户的困惑
咱们在浏览网页表格时，可能有的表格不反对按某列排序。这很好受，尤其是咱们想利用表格做数据分析时。
举个例子，在掘金的创作者核心，有个「内容数据」，能够看到所有文章的数据，如下图：
我心愿计算出每篇文章的「展示 - 浏览转化率」、「点赞率」等指标，能够参考我之前文章《掘金创作者必备: 用一行 JS 查看所有文章的转化率，让你晓得什么题目才是好题目》。
随后，我心愿依据转化率排个序，怎么办呢？
解决过程
先查看网页元素
咱们能够右键，「查看」网页元素，发现它是个 table 元素，tbody 外面就是表格的数据了，每个 tr 代表一行，如下图：
再提出可行计划
只有让 tr 按程序重新排列即可。我有 2 个想法：
- 更快的做法。利用 flex 布局中的 order 属性，只有把心愿排序的值赋值给 tr 的 css 的 order 属性，再把他们的容器（tbody）设置为 flex 布局，那么咱们不须要批改 tr 的程序，浏览器渲染时，会主动排序按 order 好。
- 更难受的做法。咱们一直调用 appendChild、removeChild、cloneNode、insertBefore、replaceChild 等等 dom 办法，使这些 tr 依照预期的程序排序。
计划一：Flex+order【4 行代码】
实现之前，咱们先手动验证一下计划可行性：即手动批改 css，先轻易设置几个 order 属性，看这种计划对 table 是否可行。
例如，我把前三个 tr 别离设置了 order 3 2 4。只有他们重新排列了，就阐明计划可行。
留神，不要遗记给 tbody 设置 flex 属性：
display: flex;
flex-direction: column;发现 flex 布局对 table 也是可行的，只是款式错乱了。咱们须要调整一下表格的款式。
通过剖析发现，是题目的单元格 (td) 太宽、数据的单元格 (td) 太窄，导致产生了这个成果，只有咱们设置一下所有的 td 的 max-width 和min-width即可，尝试一下：
尽管展现不完满，然而至多能失常看数据了！
上面，咱们就依照之前学过的办法（《掘金创作者必备: 用一行 JS 查看所有文章的转化率，让你晓得什么题目才是好题目》），给每个 tr 节点设置 order 即可，这次咱们先依照阅读数排序。
const tbody = document.getElementsByTagName('tbody')[0];
for (let tr of tbody.children) {tr.style.order = tr.children[3].innerText;
}执行结束，只见眼前的网页一闪，整个表格就依照浏览量从新排序了！
计划二：调整 tr 程序【4 行代码】
话不多说，间接上脚本：
// 获取 tbody 这个元素
const tbody = document.getElementsByTagName('tbody')[0];
// 依据 tr 元素，选出排序的基准，应该是数字，便于比拟大小
const key = ele => Number(ele.children[3].innerText);
// 对 tbody 的 children 进行排序，取得排序后的 tr 数组
const orderedNodes = Array.from(tbody.children).sort((a, b) => key(a) - key(b);
// 用排序后的 tr 数组，作为 tbody 的字元素
tbody.replaceChildren(...orderedNodes);倡议理解一下 Element.replaceChildren 这个好用的 Dom API，真是太不便啦！
你这只能对某一页排序啊？如何全表排序？
嘿嘿，我早料到你会这么问！上篇文章，曾经做了铺垫：《遇到表格，手动翻页太麻烦？我教你写脚本，一页展现所有数据》
依照上篇文章，先把表格全副数据拿到，一页展现完，你就能够对全表排序啦！
喜爱吗？求赞、求珍藏哦！谢谢你！
写在最初
我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。