Comment ajouter un nouveau <tr> après courant <tr>

Question

J'ai la structure de tableau suivante.

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

Lorsque je clique sur <a> Je veux ajouter une nouvelle <tr> à côté de <tr> dont <a> est cliquée.

Ainsi, le résultat sera:

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

Answer 1

Exemple:

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

Si vous voulez créer un emploi clone: ​​

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

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

Exemple lien: http://www.jsfiddle.net/7A6MQ/

Fondamentalement , vous créez une copie à partir du tr element (qui inclut les nœuds enfants) et insérez cette copie après cet élément. Par conséquent, vous avez besoin de la liaison .live pour vous assurer que les éléments a nouvellement créés appellent également ce gestionnaire de clic.

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

Answer 2

En outre, vous pouvez écrire:

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

Pas tellement de différence, mais semble plus facile à lire.

Answer 3

Voici le code. S'il vous plaît vérifier et laissez-moi savoir s'il y a un problème.

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