javascript - how to add the table row after the given id in jquery - Stack Overflow

admin管理员组

文章数量:1394585

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

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

• javascript
• jquery

Share Improve this question Follow edited Feb 7, 2017 at 11:13 NarendraR 7,7081111 gold badges4747 silver badges8888 bronze badges asked Feb 7, 2017 at 10:54 Question UserQuestion User 2,30333 gold badges2121 silver badges2929 bronze badges 1

• did you try append tr to table id – Jasjeet Singh Commented Feb 7, 2017 at 10:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>');
});

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>');
});

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./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>

本文标签： javascripthow to add the table row after the given id in jqueryStack Overflow