表td和jquery - 爲每個TR設置相同數量的TD

Question

我有一個HTML表格，每行有2個單元格。

我使用jquery-ui-sortable拖動和排序「td」，但不幸的是每行的TD編號可能會改變。

我希望排序後，「td」是自動排序，以便它們返回到每行兩個。

感謝

$(function() { 
 
    $("#sortable").sortable({items: 'td'}); 
 
    $("#sortable").disableSelection(); 
 
\t 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<table id="sortable"> 
 
<tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
</tr> 
 
<tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
</tr> 
 
<tr> 
 
    <td>5</td> 
 
    <td>6</td> 
 
</tr> 
 
</table>

Answer 1

要解決這個問題，你需要重新組td元素中的2行分揀動作結束之後。試試這個：

$(function() { 
 
    $("#sortable").sortable({ 
 
    items: 'td', 
 
    stop: function() { 
 
     var $table = $('#sortable'); 
 
     var $tds = $table.find('td'); 
 
     $table.empty(); 
 
     for (var i = 0; i < $tds.length; i += 2) { 
 
     $tds.slice(i, i + 2).wrapAll("<tr></tr>").parent().appendTo($table); 
 
     } 
 
    } 
 
    }); 
 
    $("#sortable").disableSelection(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<table id="sortable"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
</table>