Javascript /排序对象数组

Question

我创建了一个5x2 <table>与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

排序时，你正在做的HTML元素parseInt，而不是他们的内容。 这里是我会怎么做：

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]); 
 
    } 
 
}

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

<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>

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

table.rows返回无法排序的HTMLCollection。这允许您将其转换为阵列 - >Most efficient way to convert an HTMLCollection to an Array

为什么要使用appendChild？

当你做一个元素的appendChild，它不会重复它，它会移动它。这可以让你重新排序你的元素。