使用jQuery的each做亂數排序

2008-08-20

6217
0
jQuery
2008-11-16

在做web頁面的呈現時常常會需要做一個亂數排序資料的需求

這邊clouio就不在server端做

而選擇直接在client實做

首先想到的是跑迴圈

把亂數抓到的那一列的資料塞到目前迴圈跑到的列

所以我們要先宣告一個變數來暫存目前迴圈跑到的這列...

再交換完後再把暫存的變數還給亂數的那列

javascript

<script type="text/javascript">
    $(document).ready(function() {
        $("#Button1").bind(
        "click",
        function() {
            randomLST("list", 10);
        }
        );
    })
    function randomLST(group, len) {
        for (var i = 0; i < len; i++) {
            var tmpHtml = "";
            var tmpCnt = Math.round(Math.random() * len);
            tmpHtml = $("#" + group + "_" + i).html();
            $("#" + group + "_" + i).html($("#" + group + "_" + tmpCnt).html());
            $("#" + group + "_" + tmpCnt).html(tmpHtml)
        }
    }
</script>

HTML

<input id="Button1" type="button" value="button" />
<table border="1" id="getRow" class="style1">
    <tr id="list_1">
        <td style="width: 20px;">
            &nbsp;
        </td>
        <td>
            第一
        </td>
    </tr>
    <tr id="list_2">
        <td style="width: 20px;">
            &nbsp;
        </td>
        <td>
            第二
        </td>
    </tr>
.
.
.到第十
</table>

後來看到jQuery有each的用法馬上試著把原本的程式做一個修改

javascript改成這樣

<script type="text/javascript">
    $(document).ready(function() {
        $("#Button1").bind(
        "click",
        function() {
            randomLST("getRow");
        }
        );
    })

    function randomLST(group) {
        var getRow = $("#" + group + " tr");
        getRow.each(function(index, dom) {
            var ran = Math.round(Math.random() * getRow.length);
            tmpTd = $(dom).html();
            $(dom).html(getRow.eq(ran).html());
            getRow.eq(ran).html(tmpTd);
        })
    }
</script>

html的部分就不用在幫每一個tr命名啦

是不是省了不少工

程式也靈活了不少^^

範例在這

html.rar

回首頁