Порядок сортировки таблицы tbody в том же порядке, что и список элементов jquery json

Question

Я работал над этим jsFiddle и хотел расширить функциональность так, чтобы, когда элементы списка были изменены и отправлены через форму, связанные таблицы tbodys сортировали себя в том же порядке, что и их аналоги элементов списка:

http://jsfiddle.net/8vWXZ/20/

Можно ли отобразить заказ из одного элемента в другой, как это в jQuery?

Меня не смущают вещи, которые оживляют, но это новое требование несколько отбросило меня.

Answer 1

Я не понял, что должен делать вызов ajax, поэтому пропустил эту часть. Но логика для преобразования таблицы в соответствии с порядком списка есть в действии отправки формы. Я также реорганизовал, как использовался тег tbody, поскольку он не имел никакой цели, чтобы каждый tr имел свой собственный тег tbody.

Обновлен jsfiddle: http://jsfiddle.net/8vWXZ/24/

Код, чтобы иметь его здесь на SO:
(#tableOrder - это таблица, чьи tr s мы должны переупорядочить в соответствии с порядком li s внутри ul#reOrder)

 $('#frmItems').submit(function() {

    var tbl = $("#tableOrder tbody");

    $("#reOrder li").each(function(index) {
        var li_id = $(this).attr("id");
        //Find the number of the item. Eg "item4" should result in "4"
        var li_item_number = li_id.match(/item([0-9]*)/)[1];
        //Inside #tableOrder, find the element (a <tr>) with id corresponding the this <li>'s id. Eg "item4"'s corresponding table row's id is "#tbl-item4"
        var correspondingTR = tbl.find("#tbl-item" + li_item_number);

        tbl.append(correspondingTR);
    });

Я также сделал еще одну модификацию. Вы дали и вашим элементам li и элементам tr одинаковые идентификаторы (например, item1), что было неверно ( mmkay ), поскольку идентификатор должен быть уникальным. Поэтому я изменил tr s внутри tableOrder, чтобы иметь идентификаторы tbl-item1 и так далее.

li_id.match(/item([0-9]*)/)[1] соответствует регулярному выражению . По сути, он ищет шаблон в строке, и мы можем нарисовать несколько разделов из этой строки. Он ищет шаблон внутри косой черты, поэтому он ищет что-то вроде itemX, где X - это число ([0-9] говорит, что нас интересует любое число от 0 до 9). Он вернет массив, и элемент по индексу 1 - это число, которое нас интересует.

О append:
.each проходит через li s, которые находятся в правильном порядке. Для каждого добавляется соответствующий tr к end таблицы. Поскольку все tr в таблице будут "затронуты", это означает, что он строит порядок tr с нуля. Первый tr, который будет добавлен, это тот, что сверху. К последнему добавляется тот, что внизу (например, tr на месте n добавляется в итерации n ) Я сделал две демонстрации, чьи полезности сомнительны, но вы можете найти их полезными. http://jsfiddle.net/bGGRT/ и http://jsfiddle.net/bGGRT/1/