表中的动态输入字段

Question

我有一个带有输入的可排序行的表，用户可以动态地添加更多行。但是现在我希望能够将这些行分组。从理论上讲：

<tr> 
    <td><input type="text" name="set[0][name]" value="setname" /></td> 
<tr> 
<tr> 
    <td><input type="text" name="set[0][items][0][itemname]" value="itemname" /><td> 
</tr> 
<tr> 
    <td><input type="text" name="set[0][items][1][itemname]" value="itemname" /><td> 
</tr> 
<tr> 
    <td><input type="text" name="set[1][name]" value="setname" /></td> 
<tr> 
<tr> 
    <td><input type="text" name="set[1][items][0][itemname]" value="itemname" /><td> 
</tr> 
<tr> 
    <td><input type="text" name="set[1][items][1][itemname]" value="itemname" /><td> 
</tr> 

我想这两个集和项目可排序，以便用户可以通过拖动组行改变设定的起点，或更改一个设置通过拖动项目项目（我正在使用jQuery可排序的用户界面）。

我遇到的问题是搞清楚如何动态地添加设置和项目行，同时在排序时保持正确的数组键和值对。

任何帮助表示赞赏！谢谢！

Answer 1

$(document).on("click", $('.sortable'), function (e) { 
    $('.sortable').sortable({ 
     start: function (event, ui) { 
      var start_pos = ui.item.index(); 
      ui.item.data('start_pos', start_pos); 
     }, 
     change: function (event, ui) { 
      var start_pos = ui.item.data('start_pos'); 
      var index = ui.placeholder.index(); 
      if (start_pos < index) { 
       $('.sortable :nth-child(' + index + ')').addClass('highlights'); 
      } else { 
       $('.sortable').children(' :eq(' + (index + 1) + ')').addClass('highlights'); 
      } 
     }, 
     update: function (event, ui) { 
      var redirectUrl = $('#hiddenRedirectUpdateOrder').val(); 
      $.ajax({ 
       url: redirectUrl, 
       type: 'POST', 
       cache: false, 
       contentType: 'application/json', 
       data: JSON.stringify({ orders: $(this).sortable('toArray') }), 
      }); 
      $('.sortable').removeClass('highlights'); 
     } 
    }); 
});