CODEWITHSUNDEEP
javascriptjquery
Question User
Question User

Reputation: 2293

how to add the table row after the given id in jquery

Fiddle

How to add the <tr> after the given <tr> ID in JQuery

Below is the JQuery code :

$('#tableclick').click(function(){
            $('#tr_second').append('<tr><td>test1</td><td>test2</td><td>test3</td></tr>');
});

Expected Output

test1   test2   test3
test1   test2   test3
test1   test2   test3

Upvotes: 2

Views: 5862

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Updated fiddle.

If you want to append at the end of the table you should use #append_tr instead like :

$('#append_tr').append('<tr><td>test1</td><td>test2</td><td>test3</td></tr>');

Else to add it after #tr_second you should use insertAfter() instead :

var new_tr = '<tr><td>test1</td><td>test2</td><td>test3</td></tr>';
$( new_tr ).insertAfter( "#tr_second" );

Hope this helps.

$('#tableclick').on('click', function(){
  var new_tr = '<tr><td>test1</td><td>test2</td><td>test3</td></tr>';
  $( new_tr ).insertAfter( "#tr_second" );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='tableclick'>ADD New Row</button>
<br><br>
<table border='1'>
  <tr id='tr_second'>
    <td>test 1000</td>
    <td>test 2000</td>
    <td>test 3000</td>
  </tr>
</table>

Upvotes: 0

Darshit Patel
Darshit Patel

Reputation: 730

You're almost there just change the function from append to after

Jquery Code

$('#tableclick').click(function(){
            $('#tr_second').after('<tr><td>test1</td><td>test2</td><td>test3</td></tr>');
});

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use after() instead of append() DEMO

$('#tableclick').click(function() {
  $('#tr_second').after('<tr><td>test1</td><td>test2</td><td>test3</td></tr>');
});

Upvotes: 4

Related Questions