jQuery append new row to table - detecting existing rows but not adding new

Question

I have a basic HTMl table like this...

jQuery(document).ready(function() {
  /* Calculate Total */
  jQuery('table tr.customRow').each(function(i, row) {
    console.log('Found Row');
    jQuery(this).append('<tr>New Test Row</tr>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="customRow">
    <td>
      My Row 1
    </td>
  </tr>
  <tr class="customRow">
    <td>
      My Row 2
    </td>
  </tr>
  <tr class="customRow">
    <td>
      My Row 3
    </td>
  </tr>
</table>

I am trying to use jQuery to add a new <tr> above each found <tr> using append. The console log shows that it is finding the rows but is not adding the new one.

Where am I going wrong?

Mitya · Accepted Answer · 2020-01-22 11:24:04Z

3

You're not trying to add new trs before existing trs; you're trying to insert them INTO them.

Instead of:

jQuery(this).append('<tr>New Test Row</tr>');

You want:

jQuery(this).before('<tr>New Test Row</tr>');

Furthermore, as @Rory McCrossan points out, you can't have text nodes directly inside tr nodes - you need a td container.

answered Jan 22, 2020 at 11:24

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

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

Comments

Rory McCrossan · Accepted Answer · 2020-01-22 11:24:18Z

There's two issues in your code. Firstly the HTML you're trying to add is invalid. <tr> elements cannot contain text nodes. You need to wrap the content in a td or th.

Secondly append() will be placing the new tr inside the existing tr, which again is invalid HTML. Given your goal use before() instead.

Also note that, because the new content is the same in all cases, an each() loop is not required here. jQuery will implicitly loop over the collection and create the content on every selected element for you. Try this:

jQuery(function($) {
  $('table tr.customRow').before('<tr><td>New Test Row</td></tr>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="customRow">
    <td>My Row 1</td>
  </tr>
  <tr class="customRow">
    <td>My Row 2</td>
  </tr>
  <tr class="customRow">
    <td>My Row 3</td>
  </tr>
</table>

Collectives™ on Stack Overflow

jQuery append new row to table - detecting existing rows but not adding new

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related