使用 Array#sort 对 HTML 表格进行排序

Question

我知道这个网站是一个很棒的资源，它提供了通过我自己编码排序和元素交换来对 HTML 表进行排序的方法。我用它，效果很好。我的目标是不添加包含的库，但想象可能更好的方法如下：

其中 tr = document.getElementById("table1").rows，
元素以 tr[index].cells[0].textContent 形式访问

所以这个 tr 看起来就像是一个行数组。

然而

tr = document.getElementById("table1").rows;  
tr.sort(function(a, b) {            
  return b.cells[0].textContent - a.cells[0].textContent;    //order high to low   
})

失败，因为它说 tr.sort 不是一个函数。table.rows 似乎被定义为一个对象而不是一个数组。不知道有什么不同，但 rows 的外观和行为就像一个数组。

是否有一些解决方法可以允许此数组方法与 Javascript 排序一起使用？

回复评论中的问题：

表很复杂，因为每个行项实际上是两个相邻的行。另外，一些 TD 是空白的，除非进行处理，否则会导致数字 NaN 错误。我只对 2 行的第一行进行排序，但移动两行。但我确实有其他可以排序的简单普通表。17 列，一行看起来像

<tr><td><a href="https://www.morningstar.com/funds/xnas/vfiax/performance">VFIAX</a>
><td>5.47<td>-36.97<td>26.62<td>15.05<td>2.08<td>15.96<td>32.33<td>13.64<td>1.36<td>11.93<td>21.79<td>-4.43<td>31.46<td>18.37
><td>13.34<td><b>S&P 500 Index</b><td>
<tr><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td><td>

我当前的代码是

function sortTable(tr, sort_col) {                              
  var len, i, x, y, a, b;   
  len = tr.length - 2;   
  i = 1;   
  while (i < len) {   
    for (i = 1; i < len; i += 2) {  //double rows for each item
      a = tr[i].cells[sort_col].textContent;   
      b = tr[i + 2].cells[sort_col].textContent;    //text for ticker in col 0   
      if (sort_col > 0) {   
        a = parseFloat(a); //parseFloat because it is reading string fields like 12.6%   
        b = parseFloat(b);   
        if (isNaN(a)) a = 0;    //early blank values cause NaN errors   
        if (isNaN(b)) b = 0;   
      }   
      if ( (sort_col == 0)? a > b : a < b) {   
        tr[i].parentNode.insertBefore(tr[i + 2], tr[i]);   
        tr[i+1].parentNode.insertBefore(tr[i + 3], tr[i + 1]);  //2nd of double rows   
        break;   
      }   
    } // i   
  }   
  Sorted = 1;   
}

Answer 1

您可以使用Array.from来获取td数组中可排序的元素。然后按顺序将它们中的每一个再次添加到表中。这将被理解为DOM 中的移动，因此您最终会得到排序的表行：

let table = document.getElementById("table1");
let trs = table.rows;

Array.from(trs)
     .sort((a, b) => a.cells[0].textContent - b.cells[0].textContent)
     .forEach(tr => table.appendChild(tr));

<table id="table1">
   <tr><td>2</td></tr>
   <tr><td>4</td></tr>
   <tr><td>3</td></tr>
   <tr><td>1</td></tr>
</table>