隨機洗牌<table>列

我有一個棘手的情況來解決。我試圖隨機使用jquery或任何可用插件隨機混合表和其數據的列。隨機洗牌<table>列

我能夠將列轉移到特定位置，但我想要實現的是隨機將列和其數據隨機移動到任何位置。

例如：

實際：

<table> 
<tr> 
    <td>One</td> 
    <td>Two</td> 
    <td>Three</td> 
    <td>Four</td> 
</tr> 
<tr> 
    <td>Data One</td> 
    <td>Data Two</td> 
    <td>Data Three</td> 
    <td>Data Four</td> 
</tr> 
</table>

預期：（不以精確的格式如我所需的列被隨機洗牌的任何位置）

<table> 
<tr> 
    <td>Two</td> 
    <td>Five</td> 
    <td>One</td> 
    <td>Three</td> 
    <td>Four</td> 
</tr> 
<tr> 
    <td>Data Two</td> 
    <td>Data Five</td> 
    <td>Data One</td> 
    <td>Data Three</td> 
    <td>Data Four</td> 
</tr> 
</table>

來源

2013-07-16 JagmohanBhatt

到目前爲止你做了什麼？ –

我已經能夠在需要的位置使用detach（）方法和insertBefore（）將個別列轉移到特定位置 – JagmohanBhatt

向我們顯示您的代碼（編輯問題） – RedEyedMonster

這實際上是非常瑣碎使用外部庫。 Underscore JS有一個可以用來產生很好效果的shuffle方法。

洗牌：http://underscorejs.org/#shuffle

在這裏看到：http://jsfiddle.net/KyleMuir/NfvBa/

var rows = $('tr'); 
$.each(rows, function(index, value) { 
    var cells = $('td', value); 
    var shuffledCells = _.shuffle(cells); 
    $(this).html(shuffledCells); 
});

這一切都需要。

編輯：鑑於新希望的數據一起移動的要求，我都扔在一起這個例子：http://jsfiddle.net/KyleMuir/NfvBa/3/

在這個例子中，我存儲我們感興趣的名稱值對數據陣列。這樣我們可以對數組進行一次混洗，然後採集我們感興趣的屬性。在我們採集值之後，我將它們注入到表格行中。我給了錶行類，但是，它可以用直接的CSS選擇器來完成。

希望這會有所幫助。

來源

2013-07-16 19:18:25

好吧，對於答案感到非常興奮。但這個洗牌的問題是頭和它的數據獨立洗牌。我想保持標題和數據同步。如果移動到某個位置，它下面的數據也應該移動到相應位置 – JagmohanBhatt

如果不添加某種與數據的關係，這將是相當困難的。目前的數據完全不相關。如果是我，我會創建一個名稱值對的數組，然後對該數組進行洗牌，然後將其注入到表中。 –

@JagmohanBhatt，請參閱編輯。 –

隨機洗牌<table>列

回答

相關問題