Jak dołączyć nowy <tr> po bieżącym <tr>

Question

Mam następującą strukturę tabeli.

<table> 
    <tr> 
     <td><a href="#"></td> 
    </tr> 
</table> 

Kiedy klikam na <a> chcę dodać nowy <tr> obok <tr> z których <a> jest kliknięty.

więc wynik będzie:

<table> 
    <tr> 
     <td><a href="#"></td> 
    </tr> 
    <tr> 
     <td><a href="#"></td> 
    </tr> 
</table> 

Answer 1

Przykład:

$('a').bind('click', function(){ 
    $('<tr><td>new td</td></tr>').insertAfter($(this).closest('tr')); 
}); 

Jeśli chcesz utworzyć korzystanie Klon:

$('a').live('click', function(){ 
    var $this  = $(this), 
     $parentTR = $this.closest('tr'); 

    $parentTR.clone().insertAfter($parentTR); 
}); 

Przykład Link: http://www.jsfiddle.net/7A6MQ/

Gruntownie , tworzymy kopię z tr element (która zawiera węzły podrzędne) i wstawiamy tę kopię po tym elemencie. Dlatego potrzebne jest powiązanie .live, aby upewnić się, że nowo utworzone elementy a również wywołają ten moduł obsługi kliknięcia.

Ref .: .clone(), .insertAfter(), .live()

Answer 2

Ponadto, można napisać:

$('a').bind('click', function() { 
    $(this).closest('tr').after('<tr><td>new td<td></tr>'); 
}); 

nie tak wielkiej różnicy, ale wygląda bardziej czytelny.

Answer 3

Oto kod. Sprawdź i daj mi znać, jeśli wystąpi jakiś problem.

function AddRaw(obj){ 
var $this  = obj; 
$parentTR = $this.closest('tr'); 
$parentTR.clone().insertAfter($parentTR); 
}