Question

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

我使用jquery-ui-sortable进行拖拽和排序＆＃34; td＆＃34;，但遗憾的是每行的TD编号都可以改变。

我希望经过一次排序后，＆＃34; td＆＃34;是自动订购，以便它们返回到每行两个。

由于

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

1 个答案: