Блог

Главная - Вопросы по программированию - jQuery перетасовывает строки таблицы

jQuery перетасовывает строки таблицы

#jquery #shuffle #tabular

#jquery #перетасовка #табличный

Вопрос:

Я получил таблицу с тремя столбцами:

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/

но я хочу сохранить первый столбец в порядке по умолчанию. Либо я переупорядочу первый столбец после перетасовки, либо просто перетасую второй и третий столбцы. В любом случае, кто-нибудь может мне помочь с этим?

Ответ №1:

Скрипка: 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. звучит потрясающе! но я не могу запустить его. Я вызываю это с помощью $(‘tr’).shuffleKeepFirst();

2. Отредактированный ответ. Теперь shuffleKeepFirst функция работает не только с массивами, но и с массивоподобными объектами, такими как узлы DOM.

3. он перетасовывается между вторым и третьим столбцами, но не внутри строк?

4. Примените его к таблице, и все строки, кроме первой строки, будут отсортированы… Вы указали на бесполезный плагин, почему я изменил его для вас? Я собираюсь создать новую функцию перетасовки, в которой будет как можно меньше jQuery (сортировка элементов jQuery DOM = плохая производительность).

5. Ваш код отлично работает с div, но взгляните на мой table:jsfiddle.net/AwYWw

Ответ №2:

Чтобы убедиться, что перетасована только определенная таблица tbody, используйте идентификатор для идентификации затронутой таблицы в вашем JS:

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

В вашем HTML используйте эти:

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

так что перетасовывается только строка в таблице.