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

Question

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

我使用 jquery-ui-sortable 通过拖动和排序 "td"，但不幸的是每行的 TD 编号可能会改变。

我希望在排序后，"td" 会自动排序，以便它们 return 每行两个。

谢谢

 $(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>

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

Table td and jquery - set same number of TD for each TR

html

javascript

jquery

jquery-ui-sortable