Rearrange table rows in hardcoded table Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Rearrange table rows in hardcoded table without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class “comments” to just below the row with class “matching” how could I do this on page load?

I tried doing something like:

$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));

Here is the basic code, thank you for your help!! 🙂

<table>
<tbody>
    <tr class="designation">
        <td>Some text</td>
    </tr>
    <tr class="comments">
        <td>More text</td>
    </tr>
</tbody>

<tbody>
    <tr class="levels">
        <td>level 1</td>
    </tr>
    <tr class="amount">
        <td>$500</td>
    </tr>
</tbody>

<tbody>
    <tr class="matching">
        <td>donor</td>
    </tr>
    <tr class="mailing">
        <td>yes</td>
    </tr>
</tbody>

Answer

Try with this $('tr.matching').after($('tr.comments'));.

$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
      <tr class="designation">
          <td>Some text</td>
      </tr>
      <tr class="comments">
          <td>More text</td>
      </tr>
  </tbody>

  <tbody>
      <tr class="levels">
          <td>level 1</td>
      </tr>
      <tr class="amount">
          <td>$500</td>
      </tr>
  </tbody>

  <tbody>
      <tr class="matching">
          <td>donor</td>
      </tr>
      <tr class="mailing">
          <td>yes</td>
      </tr>
  </tbody>
</table>
We are here to answer your question about Rearrange table rows in hardcoded table - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji