关于前端:JS真好玩-表格不支持排序用4行JS排序两种方案基于flex-order或replaceChildren

8次阅读

共计 1924 个字符，预计需要花费 5 分钟才能阅读完成。

我是 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 依照预期的程序排序。

实现之前，咱们先手动验证一下计划可行性：即手动批改 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;
}

执行结束，只见眼前的网页一闪，整个表格就依照浏览量从新排序了！

话不多说，间接上脚本：

// 获取 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 噢～我有空了会分享做游戏的相干技术。

正文完