Question

我有这张桌子：

<table id="tbl">
  <tr></tr>
  <tr data-pts="3" data-goals="3" data-points="3" data-newgoals="1" data-newpoints="3"></tr>
  <tr data-pts="2" data-goals="3" data-points="3" data-newgoals="1" data-newpoints="1"></tr>
  <tr data-pts="5" data-goals="3" data-points="3" data-newgoals="1" data-newpoints="3"></tr>
  <tr data-pts="4" data-goals="3" data-points="3" data-newgoals="1" data-newpoints="2"></tr>
</table>

我想用两个数据属性对表行进行排序:(点+新点）DESC，然后（目标+新目标）DESC（所以如果有两个表行具有相同的点+新点，它将决定谁首先是目标+新目标。

我找不到如何按两个属性对其进行排序。

Answer 1

这应该遍历元素并对data-pts进行排序，我快速做到这一点，因此可能无法100％工作，理想情况下你希望将类似的东西包装成一个允许自己按多个属性排序的函数性能你不想直接在循环中编辑DOM。

您应该使用cloneNode制作您希望操作的html的副本，对其进行循环并对其进行排序，然后使用克隆调用replaceChild来更改DOM。

[].forEach.call(document.querySelectorAll('[data-pts]'), function(e) {
    if (e.previousElementSibling && parseInt(e.getAttribute('data-pts')) < parseInt(e.previousElementSibling.getAttribute('data-pts'))) {
        e.parentElement.insertBefore(e, e.previousElementSibling)
    }
})

按两个数据属性排序表行

1 个答案: