我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交友），转发前作者HullQin必须授权本文。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。网民困惑当我们浏览网页表格时，有些表格可能不支持按某列排序。这很不舒服，尤其是当我们要使用表格进行数据分析时。比如在掘金的创作者中心，有个“内容数据”，可以看到所有文章的数据，如下图：我要计算“展示阅读转化率”和“点赞”“每篇文章”的“转化率”等指标，可以参考我之前的文章《掘金创作者必备: 用一行JS查看所有文章的转化率，让你知道什么标题才是好标题》。那么，我想按照转化率排序，怎么办呢？求解过程首先检查网页元素。我们可以右击网页元素“勾选”，发现是一个表格元素，tbody包含表格的数据，每个tr代表一行，如下图：提出一个可行的方案，只需按顺序重新排列tr就是这样。我有2个想法：更快的方法。使用flex布局中的order属性，只需将要排序的值分配给tr中css的order属性，然后设置它们的容器（tbody)到flex布局，那么我们不需要修改tr的顺序，当浏览器渲染时，它会自动按照顺序排序。一种更舒适的方法。我们不停地调用appendChild、removeChild、cloneNode、insertBefore、replaceChild等dom方法，让这些trs按照预期的顺序排序。方案一：Flex+order[4行代码]在实施之前，我们先手动验证一下方案的可行性：即手动修改css，先随意设置几个order属性，看看这个方案对桌子。比如我把前三个tr的顺序分别设置为324。只要重新排列，解决方案是可行的。注意，不要忘记为tbody设置flex属性：display:flex;弹性方向：列；发现表格用flex布局也是可行的，但是样式乱了。我们需要调整表格的样式。经过分析，发现是标题单元格（td）太宽，数据单元格（td）太窄，导致出现这种效果，只要我们设置所有td的max-width和min-width，试试看看：虽然显示不完美，但至少可以正常查看数据！接下来，我们就按照之前学过的方法给每个tr节点设置顺序即可(《掘金创作者必备: 用一行JS查看所有文章的转化率，让你知道什么标题才是好标题》)。这次我们先按阅读次数排序。consttbody=document.getElementsByTagName('tbody')[0];for(lettroftbody.children){tr.style.order=tr.children[3].innerText;}执行完成后，看到一个眼前的网页一闪而过，整个表格都是按照阅读量重新排列的！方案二：调整tr的顺序【4行代码】废话不多说，直接上脚本：//获取tbody元素consttbody=document.getElementsByTagName('tbody')[0];//选择并排序根据tr元素基准应该是一个数字，方便比较大小constkey=ele=>Number(ele.children[3].innerText);//对tbody的children进行排序，得到排序后的tr数组constorderedNodes=Array.from(tbody.children).sort((a,b)=>key(a)-key(b);//使用排序后的tr数组作为tbody的word元素tbody.replaceChildren(...orderedNodes);推荐了解一下看看Element.replaceChildren这个好用的DomAPI，好方便！只能对某个页面进行排序？如何对整个表格进行排序？嘿，我还以为你会问这个问题呢!我已经在上一篇文章里做了铺垫：《遇到表格，手动翻页太麻烦？我教你写脚本，一页展示所有数据》按照上一篇文章，先把表格中的所有数据获取，显示一页后，可以对w进行排序洞表！你喜欢它？请喜欢和收藏！谢谢你！最后我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交朋友）。转载本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，可以很方便的和朋友一起玩网络游戏，五子棋等游戏，免费，无广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
