wie die Tabellenzeile nach der angegebenen ID in jquery hinzufügen

Question

Fiddle

Wie

unterhalb die <tr> nach der angegebenen <tr> ID in JQuery hinzuzufügen, ist der JQuery-Code:

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

Erwarteter Ausgang

test1 test2 test3 
test1 test2 test3 
test1 test2 test3 

Answer 1

können Sie after() anstelle von append()DEMO

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

Answer 2

Updated fiddle.

Wenn Sie am Ende der Tabelle angehängt werden soll, sollten Sie #append_tr statt wie verwenden:

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

Else es nach #tr_second hinzufügen Sie insertAfter() stattdessen verwenden sollten:

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

Hoffe das hilft.

$('#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>

Answer 3

Sie sind fast da nur die Funktion ändern von anhängen zu nach

JQuery-Code

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