Rearrange existing table using jquery or pure javascript

Question

I want to rearrange an existing dynamic table with jquery or pure javascript. I already found this post on stackoverflow that is exactly what I am looking for but the given solution doesn't work for me.

I have some Problems with this Script.

1.) There is an unwanted <tr></tr> element at the top and there will be one more with every code execution.

2.) I can not use this code on just one table. If I use $('#example tbody') and add an id to the table it disappears.

3.) It's not working on the Internet Explorer.

Maybe someone can help

You're using "pure" JavaScript whether or not you use jQuery (unless you use TypeScript or something). The contrast you're looking for is "using jQuery" vs. "using the DOM directly." Knowing that makes it easier to search for the information you need. — T.J. Crowder
– T.J. Crowder, Commented Oct 9, 2020 at 7:02
Welcome to SO. Please ask just one question per post going forward. You have three distinct issues listed up there. — isherwood
– isherwood, Commented Oct 9, 2020 at 19:54

Recep Karadas · Accepted Answer · 2020-10-09 08:18:05Z

0

The post you mentioned shows how it's getting done, especially the splitting and adding part. The rest depends on your requirements, so you have to tweak the code to get the expected behavior.

To get rid of the tr-tag you could simply remove the children of tbody, so you have a clean element.
If you want to limit it for a specific table you could add an id to that table and change the selectors accordingly.
Couldn't reproduce. Works also in 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>

answered Oct 9, 2020 at 8:18

Recep Karadas

6894 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emerich S. Over a year ago

Thx for your help but now the sorting is different & it's still not working in ie but the <tr></tr> problem is solved. I added my current script.

Emerich S. · Accepted Answer · 2020-10-10 00:47:44Z

Found an answer for my question, that also works in Internet Explorer now.

Thx ;-)

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

Collectives™ on Stack Overflow

Rearrange existing table using jquery or pure javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related