CODEWITHSUNDEEP
javascript
Jenny
Jenny

Reputation: 919

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>

Upvotes: 0

Views: 42

Answers (2)

Sumit Gulati
Sumit Gulati

Reputation: 675

$(".matching").after($(".comments"));

Upvotes: 0

Arg0n
Arg0n

Reputation: 8423

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>

Upvotes: 1

Related Questions