Question

我有一个棘手的情况需要解决。我试图使用jquery或任何可用的插件随机地对表的列及其数据进行随机播放。

我能够将列移动到特定位置，但我想要实现的是将列及其数据随机地移动到任何位置。

示例：

实际值：

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

Answer 1

使用外部库实际上非常简单。 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/

在这个例子中，我将我们感兴趣的数据存储为Name Value对数组。这样我们就可以对数组进行一次洗牌，然后选择我们感兴趣的属性。在我们获取值之后，我将它们注入到表行中。我给了表行类，但是，它可以用直接的CSS选择器来完成。

希望这有帮助。

列<table> </table>的随机随机播放

1 个答案: