表 td 和 jquery - 为每个 TR 设置相同数量的 TD

Question

我有一个 HTML 表格，每行有 2 个单元格。

我使用 jquery-ui-sortable 通过拖动和排序“td”，但不幸的是每行的 TD 编号可以更改。

我希望在排序之后，“td”会自动排序，以便它们恢复为每行两个。

谢谢

 $(function() {
    $( "#sortable" ).sortable({items: 'td'});
    $( "#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>

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>