表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>