jQuery-将单个表行分为三列

Question

我有一个数据库，该数据库在单行中输出一个表，我需要使用jQuery将单行分为三列的多行，如果我可以更改一个值使其成为多行，那也很好将来是4或5。

HTML输出示例

<table class="staff">
  <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>

需要结果

注意，我无法编写jQuery，因此我操纵了现有脚本，我在下面找到了该脚本，它创建了每行2列的倍数，但是当我尝试弄乱值时使其每行显示3列。

jQuery

$("table.staff td").each(function(index) {
  var odd = isOdd((index + 1));
  if (odd) {
    $("table.staff tbody").append($("<tr>"));
  }
  $("table.staff tr").last().append($(this));
});
$("table.staff tr").first().remove();

function isOdd(num) {
  return num % 2;
}

fiddle

任何帮助将不胜感激

谢谢

Answer 1

您可以获取所有td，然后使用splice()获取每行所需数量的项目，然后将其附加到tbody

$(document).ready(function() {
  let tds = $('td');
  let len = tds.length;
  let itemsPerRow = 3;
  for (var i = 0; i < len; i = i + itemsPerRow) {
    $('tbody').append($('<tr></tr>')).append(tds.splice(0, itemsPerRow));
  }
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

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

Answer 2

我在项目中使用了现有的解决方案。该表的源代码看起来不正确。 <tr></tr>标记之间有TD标记，不在任何一侧。有人可以看看吗？