Come aggiungere nuovo <tr> dopo l'attuale <tr>

Question

Ho la seguente struttura della tabella.

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

Quando clicco su <a> voglio aggiungere nuovi <tr> accanto <tr> di cui <a> viene cliccato.

Così il risultato sarà:

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

Answer 1

Esempio:

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

Se si desidera creare un uso clone: ​​

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

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

Esempio link: http://www.jsfiddle.net/7A6MQ/

Fondamentalmente , si crea una copia da tr element (che include i nodi figlio) e si inserisce tale copia dopo quell'elemento. Pertanto, è necessario il binding .live per assicurarsi che gli elementi a appena creati invochino anche quel gestore di clic.

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

Answer 2

Inoltre, è possibile scrivere:

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

Non così tanta differenza ma sembra più leggibile.

Answer 3

Ecco il codice. Per favore controlla e fammi sapere se c'è qualche problema.

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