7

Given the following table:

    <table>
        <tr class="one"><td>Hello</td></tr>
        <tr class="one"><td>Hello</td></tr>
        <tr class="one"><td>Hello</td></tr>
        <tr class="two"><td>World</td></tr>
        <tr class="two"><td>World</td></tr>
    </table>

Is it possible to use JQuery to insert a row between the 3rd and 4th rows (when the class changes from "one" to "two")? If so, how?

I'm thinking maybe using insertAfter() and .last() in some combination...

elemenop
  • 103
  • 1
  • 1
  • 4

3 Answers3

10
$('table tr:nth-child(3)').after('<div>....</div>');

This will insert something after the 3rd row every time!

$('table .one:nth-child(3)').after('<div>....</div>');

This will insert something after the 3rd .one class.

$('table .two:nth-child(1)').before('<div>....</div>');

This would insert before the first .two class. Meaning it would be inbetween .one & .two.

Edit

From what I understand of your comment, you would like to insert an element after the last .one tr.

This can easily be done by using this:

$('.one').last().after('<div>...code goes in here...</div>');

OR

$('.one:last-child').after('<div>...</div>');
Community
  • 1
  • 1
James111
  • 15,378
  • 15
  • 78
  • 121
  • I would like to be able to dynamically add the row – elemenop May 02 '16 at 02:08
  • Wait, so do you want to insert something after every 3'rd row? @elemenop – James111 May 02 '16 at 02:10
  • I would like to add another Hello after the 3rd row, but I'd like to be able to keep adding more of the same rows. Each new Hello will be inserted after the last row with the class "one" – elemenop May 02 '16 at 02:13
  • @James111 I just discovered that `$('.one:last-child')` doesn't work as expected. It only works if the `.one` is actually the last child element of the parent, and not just the last child with a class. – Eric Guan May 02 '16 at 02:23
1

Easy if you do it like this, my opinion!

$("table").find(".one").eq(-1).after($("<tr><td>").text("circle of life"))
  • *find() , finds all elements with class .one *
  • *eq(-1) , least element *
  • after() , places the object after your eq(-1) element
  • *($("") , makes the object *
  • text() , set the text of the object

$("table").find(".one").eq(-1).after($("<tr><td>").text("circle of life"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="one">
    <td>Hello</td>
  </tr>
  <tr class="one">
    <td>Hello</td>
  </tr>
  <tr class="one">
    <td>Hello</td>
  </tr>
  <tr class="two">
    <td>World</td>
  </tr>
  <tr class="two">
    <td>World</td>
  </tr>
</table>
-1

Something like this.

$('table .one:last-child').after(your html here)

EDIT: I seemed to have stumbled across a common misunderstanding of the last-child selector. If you're curious about why my answer doesn't work read this. :last-child not working as expected?

The corrected answer is $('table .one:last').after(your html here)

Community
  • 1
  • 1
Eric Guan
  • 15,474
  • 8
  • 50
  • 61