如何排序表知道行位置？

Question

我有一個表：

<table> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
</table> 

數組，告訴那裏的每一行應該來[{index: 2},{index: 1},{index: 0}]（第一行是該數組中的最後一個，第二行是從陣列中的陣列排和第三排0的1）。

Answer 1

這是我的方法。

// create a new temporary tbody outside the DOM (similar to jQuery's detach) 
var tbody_tmp = document.createElement('tbody'); 

// itterate through the array in the order of a new table 
for(var i = 0, j = data.length; i < j; i++) 
{ 
    // make a copy of current row (otherwise, append child removes the row from the rows array and messes up the index-finder; there got be a better way for this) 
    var row  = rows[data[i].index].cloneNode(true); 

    tbody_tmp.appendChild(row); 

    // reset the index to reflect the new table order (optional, outside the sample) 
    data[i].index = i; 
} 

// Note that tbody is a jquery object 
tbody.parent()[0].replaceChild(tbody_tmp, tbody[0]); 

雖然克隆方法很慢，擁有10,000多條記錄需要1200毫秒。此外，jQuery-less方法更可取。

發佈此信息以防其他人可能發現它足夠簡單以滿足其需求（少於1,000行）。

---

經過幾個小時的不安思考，我最終得出了以下結論。如果這個樣本還不夠，我寫了一篇完整的博客文章，解釋它背後的邏輯，http://anuary.com/57/sorting-large-tables-with-javascript。

// Will use this to re-attach the tbody object. 
var table  = tbody.parent(); 

// Detach the tbody to prevent unnecessary overhead related 
// to the browser environment. 
var tbody  = tbody.detach(); 

// Convert NodeList into an array. 
rows   = Array.prototype.slice.call(rows, 0); 

var last_row = rows[data[data.length-1].index]; 

// Knowing the last element in the table, move all the elements behind it 
// in the order they appear in the data map 
for(var i = 0, j = data.length-1; i < j; i++) 
{ 
    tbody[0].insertBefore(rows[data[i].index], last_row); 

    // Restore the index. 
    data[i].index = i; 
} 

// Restore the index. 
data[data.length-1].index = data.length-1; 

table.append(tbody);