使用 jquery 或纯 javascript 重新排列现有表答案

【问题标题】：Rearrange existing table using jquery or pure javascript使用 jquery 或纯 javascript 重新排列现有表
【发布时间】：2020-10-10 08:47:44
【问题描述】：

我想用 jquery 或纯 javascript 重新排列现有的动态表。我已经在 stackoverflow 上找到 this 帖子，这正是我想要的，但是给定的解决方案对我不起作用。

我对这个脚本有一些问题。

1.) 顶部有一个不需要的 <tr></tr> 元素，每次执行代码都会增加一个。

2.) 我不能只在一张桌子上使用此代码。如果我使用 $('#example tbody') 并向表中添加一个 id，它就会消失。

3.) 它无法在 Internet Explorer 上运行。

也许有人可以帮忙

【问题讨论】：

无论您是否使用 jQuery，您都在使用“纯”JavaScript（除非您使用 TypeScript 或其他东西）。您正在寻找的对比是“使用 jQuery”与“直接使用 DOM”。了解这一点可以更轻松地搜索您需要的信息。
欢迎来到 SO。请在以后的每个帖子中只问一个问题。上面列出了三个不同的问题。

标签： javascript jquery html-table

【解决方案1】：

您提到的帖子显示了它是如何完成的，尤其是拆分和添加部分。其余的取决于您的要求，因此您必须调整代码以获得预期的行为。

要摆脱 tr 标记，您可以简单地删除 tbody 的子项，这样您就有了一个干净的元素。
如果您想针对特定表限制它，您可以向该表添加一个 id 并相应地更改选择器。
无法重现。也适用于 IE。

$(document).ready(function() {
  $("#rearrange").click(function(){
    
    let tds = $('#rearrangeTable td');
    let len = tds.length;
    let randomItemsPerRow = Math.floor(Math.random() * 6) + 2;
    let itemsPerRow = randomItemsPerRow;
    $("#rearrangeTable tbody").children().remove();
    for (var i = 0; i < len; i = i + itemsPerRow) {
      $('#rearrangeTable tbody').append($('<tr></tr>')).append(tds.splice(0, itemsPerRow));
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="rearrange">
 Rearrange
</button>
<table id="rearrangeTable" class="staff" border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

【讨论】：

感谢您的帮助，但现在排序不同了，它仍然无法在 ie 中工作，但问题已解决。我添加了我当前的脚本。

【解决方案2】：

找到了我的问题的答案，现在也可以在 Internet Explorer 中使用。

谢谢 ;-)

<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>

<script>

     function letsgo() {

          var tds = $('#example td');
          var len = tds.length;
          var itemsPerRow = 3;

          $("#example tbody").children().remove();

          for (var i = 0; i < len; i = i + itemsPerRow) {
               $('#example tbody').append($('<tr>'));
               $('#example tbody tr:last').append(tds.splice(0, itemsPerRow));
               $('#example tbody').append($('</tr>'));
          };
     }

</script>

<button onclick="letsgo();">Rearrange</button>

<table id="example" border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

【讨论】：