表 td 并为每个 TR 设置相同的 TD 数

Table td and set same number of TD for each TR

本文关键字：TD 设置 TR td      更新时间：2023-09-26

>我有一个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>

要解决此问题，您需要在排序操作完成后将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>

相关文章：