2016-05-20 150 views
0

我創建了一個5x2 <table>id="competitors"Javascript /排序對象數組

enter image description here

我想通過自己的位置財產(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)

+0

排序它不會對DOM做任何更改,您需要進行這些更改。 – epascarello

回答

0

排序時,你正在做的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,它不會重複它,它會移動它。這可以讓你重新排序你的元素。