Add After

I wanted to add new row using jQuery. Like this: How can I add new table row or grid using jQuery?

Solution 1:

insertAfter: This will insert the element after the specified element.

$('<tr />').insertAfter('table tr:last');

Docs: http://api.jquery.com/insertAfter/

append: Will append to the end of the element.

$('table').append('<tr></tr>');

Docs: http://api.jquery.com/append/

Solution 2:

$('#addme').click(function() {
  $('table').append('<tr><td>id</td><td>name</td><td>desc</td></tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>id</th>
    <th>name</th>
    <th>description</th>
  </tr>

  <tr>
    <td>1</td>
    <td>einlanzer</td>
    <td>dev</td>
  </tr>

</table>

<input type="button" id="addme" value="add me please">

http://api.jquery.com/append/

Solution 3:

You can simply use .append() to add the new row after last row:

$('table').append('Markup_for_tr');

if you want to append after certain tr(say after first tr):

$('table tr:eq(0)').after("Markup_for_tr");