jQuery shuffle表行

时间:2011-10-01 13:56:33

标签: jquery shuffle tabular

我有一个包含三列的表格:

1 A A
2 B B
3 C C
4 D D

我想要做的是将表格行混洗,但只填充第二列和第三列,如下例所示

1 C C
2 A A
3 D D
4 B B

我发现了一个漂亮的插件,可以让桌面行被洗牌 http://www.yelotofu.com/2008/08/jquery-shuffle-plugin/

但我想保留第一列的默认顺序。 我要么在洗牌之后重新排序第一列,要么我只是洗牌 第二和第三列。无论哪种方式都可以帮助我解决这个问题?

2 个答案:

答案 0 :(得分:5)

小提琴:http://jsfiddle.net/tGY3g/

你走了:

(function($){
    //Shuffle all rows, while keeping the first column
    //Requires: Shuffle
 $.fn.shuffleRows = function(){
     return this.each(function(){
        var main = $(/table/i.test(this.tagName) ? this.tBodies[0] : this);
        var firstElem = [], counter=0;
        main.children().each(function(){
             firstElem.push(this.firstChild);
        });
        main.shuffle();
        main.children().each(function(){
           this.insertBefore(firstElem[counter++], this.firstChild);
        });
     });
   }
  /* Shuffle is required */
  $.fn.shuffle = function() {
    return this.each(function(){
      var items = $(this).children();
      return (items.length)
        ? $(this).html($.shuffle(items))
        : this;
    });
  }

  $.shuffle = function(arr) {
    for(
      var j, x, i = arr.length; i;
      j = parseInt(Math.random() * i),
      x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
  }
})(jQuery)

用法

$("table").shuffleRows()

答案 1 :(得分:0)

要确保只对特定的表tbody进行洗牌,请在JS中使用ID来标识受影响的表:

/* Shuffle the table row, identify by id ---- */
$('#shuffle').shuffleRows();

在您的HTML中,使用以下内容:

<table id="shuffle">
 <thead>...</thead>
 <tbody>
  <tr>....</tr>
  <tr>....</tr>
  <tr>....</tr>
 </tbody>
</table>

这样只有thead中的行才会被洗牌。