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));
  }
});

<scriptsrc="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script><tableclass="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?