JQuery - Split Single Table Row Into Rows Of Three Columns

I have a database that outputs a table in a single row, I need to use jQuery to split the single row into multiple rows of three columns, it would also be good if I could change a

Solution 1:

You can get all the td and then use the splice() get the desired number of items per row, and then append them to the 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>

Solution 2:

I used the existing solution in my project. The source code of the table doesn't look correct. There are <tr></tr> tags between the TD tags, not on either side. Could someone possibly have a look?