Cómo agregar nuevo <tr> después de actual <tr>

Question

Tengo la siguiente estructura de tabla.

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

Cuando hago clic en <a> Quiero añadir nueva <tr><tr> junto a las cuales se hace clic <a>.

Así, el resultado será:

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

Answer 1

Ejemplo:

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

Si desea crear un uso clon:

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

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

Ejemplo enlace: http://www.jsfiddle.net/7A6MQ/

Básicamente , crea una copia desde tr element (que incluye nodos secundarios) e inserta esa copia después de ese elemento. Por lo tanto, necesita el enlace .live para asegurarse de que los elementos recién creados a también invoquen ese controlador de clic.

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

Answer 2

Además, se puede escribir:

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

No tanta diferencia, pero se ve más legible.

Answer 3

Aquí está el código. Por favor verifique y avíseme si hay algún problema.

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