".toArray（）"または ".serialize（）"を使用せずにjqueryを使用してテーブルの行の順序を保存するにはどうすればよいですか？

Question

たとえば、jqueryをソート可能なテーブルを使用しています。行のinnerHTMLをドラッグして別の行のinnerHTMLと交換し、 ".toArray（）"または ".serialize（）"を使用せずにsubmitで注文を保存するにはどうすればよいですか？例えば、上下のボタンを使ってinnerHTMLを展開することで、 ".toArray（）"や ".serialize（）"を使わずに注文を保存することができました。

jQuery(function() { 
    var ids = []; 
    $("tbody#sortable").sortable({ 
     axis: "y", 
     items: ".row_order", 
     forcePlaceholderSize: true, 
     placeholder: "must-have-class", 
    start: function(event, ui) { 
     //Empty the array to avoid duplication. 
     ids = []; 
     //Store the ids in the array. 
     $.each(event.target.children, function() { 
      ids.push($(this).attr('id')); 
     }); 
    }, 
    update: function(event, ui) { 
     //Store the html in local variables 
     var prevHtml = ui.item.prev().html(); 
     var nextHtml = ui.item.next().html(); 

     //Call .html and pass the html content as an argument 
     ui.item.prev().html(nextHtml); 
     ui.item.next().html(prevHtml); 

     //On an update, loop through the sortable items and reset their items. 
     for (var i = 0; i < event.target.children.length; i++) { 
     $(event.target.children[i]).attr('id', ids[i]); 
     } 
    }   
    }); 
}); 

これは、変数への項目のHTMLコンテンツを割り当てていると、あなたはどのような方法でDOM要素を操作していないので、あなたの例では動作しませんFiddle

Answer 1

です。

内部HTMLを更新するために、あなたは各要素に対して.html()を呼び出し、引数としてHTMLを渡す必要があるだろう：

は

jQuery(function() { 
    var ids = []; 
    jQuery("#sortable_available").sortable({ 
    items: "li", 
    start: function(event, ui) { 
     //Empty the array to avoid duplication. 
     ids = []; 
     //Store the ids in the array. 
     $.each(event.target.children, function() { 
     ids.push($(this).attr('id')); 
     }) 
    }, 
    update: function(event, ui) { 
     //Store the html in local variables 
     var prevHtml = ui.item.prev().html(); 
     var nextHtml = ui.item.next().html(); 

     //Call .html and pass the html content as an argument 
     ui.item.prev().html(nextHtml); 
     ui.item.next().html(prevHtml); 

     //On an update, loop through the sortable items and reset their items. 
     for (var i = 0; i < event.target.children.length; i++) { 
     $(event.target.children[i]).attr('id', ids[i]); 
     } 
    } 
    }); 
}); 

のIDを維持するためのより良い方法があるかもしれませんが、あなたの要件がどのように達成されるかの大まかな例です。

をクリックしてください。hereライブデモをご覧ください。