用jQuery根據給定的行ID重新排列HTML表

我有一個HTML表，其中每個數據行都有一個唯一的id屬性。我正在編寫一個腳本來輪詢服務器的數據，並使用它得到的結果重新對錶進行排序。從服務器上，我收到一個數組是這樣的：用jQuery根據給定的行ID重新排列HTML表

var order_arr = [6, 4, 2, 1, 5, 3]

，我想用直觀地重新排序一些表中的數據是這樣的：

<tr id="user-1">...</tr> 
<tr id="user-2">...</tr> 
<tr id="user-3">...</tr> 
<tr id="user-4">...</tr> 
<tr id="user-5">...</tr> 
<tr id="user-6">...</tr>

因此，它看起來像這樣用戶：

<tr id="user-6">...</tr> 
<tr id="user-4">...</tr> 
<tr id="user-2">...</tr> 
<tr id="user-1">...</tr> 
<tr id="user-5">...</tr> 
<tr id="user-3">...</tr>

我寫了一些jQuery code on jsFiddle來做到這一點，但我不知道這是否是最好的技術。它獲取<tr>元素的數組並根據每行ID的相應索引對它們進行排序。它以一個.html()調用結束，它只是替換整個表體內容。

所以.. TL;博士：

是this code直觀地重新排序給數組持有排 ID的所需順序的HTML表格的最佳方式？
我該如何製作動畫？我想我可以寫一個 CSS破解代替，其中每個錶行擁有絕對位置並計算每行應該持有哪些位置後，我可以只運行.animate() 。想法與我現在的代碼？

來源

2011-03-02 Jon Gauthier

是否表實際上需要在DOM來進行排序或只是視覺上排序？ – Endophage

它可以被視覺分類，沒關係。這就是我用我的CSS動畫想法所思考的。對不起，我現在意識到，解釋它可能會給出錯誤的信息。 –

這是我的CSS排序思路：http://jsfiddle.net/hans/6qVf5/3/ –

我可以找到保留原始功能和添加動畫的最佳解決方案是使用CSS。下面是相關的JS：

function sort(order_arr) { 
    var top = 0;  
    $.each(order_arr, function(idx, val) { 
     var el = $('tbody tr#user-' + val); 

     el.animate({ 
      position: 'absolute', 
      top: top + 'px' 
     }, 400); 
     top += el.outerHeight(); 
    }); 
}

Demo on jsFiddle

來源

2011-03-22 05:30:15

用jQuery根據給定的行ID重新排列HTML表

回答

相關問題