Rearrange table rows in hardcoded table

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>

Leave a Reply

Your email address will not be published. Required fields are marked *