Javascript / Sort对象数组

Question

我使用<table>创建了一个5x2 id="competitors"。

如果pos事件发生，我尝试使用以下代码将竞争对手按其位置属性（onclick="sortData()"）对象进行排序：

function getTableData() {
  var tab = document.getElementById("competitors");
  var data = [];

  for(var i=0;i<tab.rows.length;i++) {
    var competitor = {
        name: tab.rows[i].cells[0],
        pos: tab.rows[i].cells[1]
    };

    data.push(competitor);
  }

  return data; 
}

function sortData() {
  var sortedData = getTableData();
  sortedData.sort(function(a,b){
    return parseInt(a.pos) - parseInt(b.pos);
  });

  for(var i = 0; i < sortedData.length;i++) {
    console.log(sortedData[i].name.innerHTML, sortedData[i].pos.innerHTML);
  }
}

问题是控制台打印出同一个表。但是，如果我不添加比较功能，则按字母顺序排序。请帮我理解发生了什么。 （我昨天开始使用JS）

Answer 1

排序时，您正在使用parseInt HTML元素而不是其内容。 我将如何做到这一点：

＆＃13;

＆＃13;

function sortData(){
  var table = document.getElementById('competitors'),
      data  = [].slice.call(table.rows);

  data.sort(function(a,b){
      return parseInt(a.cells[1].innerHTML, 10) - parseInt(b.cells[1].innerHTML, 10);
  });

  for(var i=0; i<data.length; i++) {
      table.appendChild(data[i]);
  }
}

＆＃13;

td{ border: 1px solid #000; text-align: center; padding: .2em }

＆＃13;

<table id="competitors">
  <tr><td>Greg</td><td>4</td></tr>
  <tr><td>John</td><td>10</td></tr>
  <tr><td>Sarah</td><td>6</td></tr>
  <tr><td>Ben</td><td>2</td></tr>
  <tr><td>Jack</td><td>1</td></tr>
</table>
<br>
<button onclick="sortData()">Sort</button>

＆＃13;

＆＃13;

＆＃13;

  

[].slice.call(table.rows)的内容是什么？

     

table.rows返回一个无法排序的HTMLCollection。这允许您将其转换为数组 - ＆gt; Most efficient way to convert an HTMLCollection to an Array

     

为什么要使用appendChild？

     

当您执行元素的appendChild时，它不会复制它，它会移动它。这允许您重新排序元素。