JQuery排序：當拖動到另一個位置時，可以將兩行視爲一行嗎？

Question

我有一個表的佈局，像這樣：

<table name="table" class="table table-striped pagin-table table-bordered"> 
      <thead> 
       <tr> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>5</td> 
        <td>6</td> 
        <td class="colour" colspan="2">Options</td>   
       </tr> 
      </thead> 
      <tbody> 
       <tr class="table-tr draggable"> 
        <td class="duration">1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
        <td>5</td> 
        <td>6</td> 
        <td><input type="checkbox"/></td> 
        <td>        
         <a class="btn btn-small btn-info" style="margin:auto; display:block;" href="{{ URL::to('mods/' . $value->id . '/edit') }}">Edit</a> 
        </td> 
       </tr> 

       <tr class="table-tr draggable"> 
        <td colspan="10">Team</td> 
       </tr> 
      @endforeach 
      </tbody> 
</table> 

和一個jQuery可排序的功能，像這樣：

$("tbody").sortable({ 
     stop: function (event, ui) { 
      var ids = new Array(); 
      $('tr', this).each(function() { 
       ids.push($(this).data('id')); 
      }); 
      $.get(window.location.href.split('?')[0] + "/sort", {ids: ids}); 
     } 
}); 

對於這個表，我使用jQuery可排序的，所以我可以左右移動行。然而，我的排序功能移動每個單排，在這裏我也想組的兩行，讓他們一起移動：

|----1----|----2----|----3----|----4----|----5----|----6----|-Options-| 
|--------------------------------Team---------------------------------| 

我試過行組合在一起使用HTML，但它打破和不動兩行都在一起。我也嘗試修改我的函數，以便它引用'tbody'標籤中的所有內容，但它仍將兩個不同的'tr'標籤視爲單獨的行。

如果有人有任何見解，請讓我知道！謝謝！

編輯：（明晰）

我的表有兩行，我希望JQuery的可排序把它們看作一個行排序/拖動到另一個位置的目的。或者，如果我可以創建一行，並將其分成兩部分，以便數字/選項位於頂部，並且團隊位於底部，那也可以。

Answer 1

如果你想對點擊事件列進行排序然後我的下面的代碼可以幫助你。

function sortTable(n, selector) { 
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; 
    ///table = document.getElementById(selector); 
    table = $(selector); 
    switching = true; 

    //Set the sorting direction to ascending: 
    dir = "asc"; 
    /*Make a loop that will continue until 
    no switching has been done:*/ 
    while (switching) { 
     //start by saying: no switching is done: 
     switching = false; 
     rows = $(table).find('tr'); ///table.getElementsByTagName("TR"); 
     /*Loop through all table rows (except the 
     first, which contains table headers):*/ 
     for (i = 0; i < (rows.length - 1) ; i++) { 
      //start by saying there should be no switching: 
      shouldSwitch = false; 
      /*Get the two elements you want to compare, 
      one from current row and one from the next:*/ 
      x = rows[i].getElementsByTagName("TD")[n]; 
      y = rows[i + 1].getElementsByTagName("TD")[n]; 
      /*check if the two rows should switch place, 
      based on the direction, asc or desc:*/ 
      if (x != null && y != null) { 
       if (dir == "asc") { 
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { 
         //if so, mark as a switch and break the loop: 
         shouldSwitch = true; 
         break; 
        } 
       } else if (dir == "desc") { 
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { 
         //if so, mark as a switch and break the loop: 
         shouldSwitch = true; 
         break; 
        } 
       } 
      } 
     } 
     if (shouldSwitch) { 
      /*If a switch has been marked, make the switch 
      and mark that a switch has been done:*/ 
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); 
      switching = true; 
      //Each time a switch is done, increase this count by 1: 
      switchcount++; 
     } else { 
      /*If no switching has been done AND the direction is "asc", 
      set the direction to "desc" and run the while loop again.*/ 
      if (switchcount == 0 && dir == "asc") { 
       dir = "desc"; 
       switching = true; 
      } 
     } 
    } 
} 

Answer 2

<table> 
<tbody > 
       <tr> 
        <td rowspan="2" class="duration">1</td> 
        <td rowspan="2" >2</td> 
        <td rowspan="2"> 3</td> 
        <td rowspan="2" >4</td> 
        <td rowspan="2" >5</td> 
        <td rowspan="2" >6</td> 
        <td rowspan="2" ><input type="checkbox"/></td> 
        <td rowspan="2" >        
         <a class="btn btn-small btn-info" style="margin:auto;" href="{{ URL::to('mods/' . $value->id . '/edit') }}">Edit</a> 
        </td> 
       </tr> 

       <tr class="table-tr draggable"> 
        <td colspan="8">Team</td> 
       </tr> 
      </tbody> 
      </table> 

顯示這看起來就像這樣（1 2 3 4 5 6 checkox編輯團隊）