Agregar nueva fila de tabla después de la fila actual usando jQuery

Question

Estoy tratando de agregar una nueva fila que es clon de la fila actual. Intenté seguir el código. No aparece el error, pero tampoco agrega filas. ¿Cuál es el error aquí con mi código? ¿Hay alguna idea alternativa fácil?

 $('input[name="cmdAddRow"]').live('click', function(){ 
      $curRow = $(this).parent('tr'); 
      $newRow = $curRow.clone(true); 
      console.log($newRow); 
      $curRow.after($newRow); 
      console.log('added'); 
     }); 

diseño HTML:

<table> 
    <tr> 
     <td><input type="hidden" name="uin" value="xxx"></td> 
     <td><input type="text" name="uname" value=""></td> 
     <td><input type="text" name="uadd" value=""></td> 
     <td><input type="text" name="utel" value=""></td> 
     <td><input type="button" name="cmdAddRow" value="Add"></td> 
    </tr> 
</table> 

Answer 1

$(this).parent('tr') no encontrará nada. Su elemento input estará dentro de td o th. parent solo encuentra el elemento primario inmediato del elemento, luego lo compara con el selector que usted proporciona. Por lo tanto, no encontrará nada. A continuación, no clona nada, e inserta nada nuevo después de la nada anterior. Tal vez, como era de esperar, esto en realidad no hace nada.

Es necesario utilizar closest, que encuentra el elemento más cercano para que coincida con un selector

var $curRow = $(this).closest('tr'); 

Tenga en cuenta también que está utilizando variables globales, ya que no se está utilizando var (en lo cierto esto en la línea anterior), que probablemente no quieras hacer. Además, live no es una buena función para usar; utilizar on lugar, que hace lo mismo con más elegancia:

$('#yourTable').on('click', 'input[name="cmdAddRow"]', function() { 
    var $curRow = $(this).closest('tr'), 
     $newRow = $curRow.clone(true); 
    console.log($newRow); 
    $curRow.after($newRow); 
    console.log('added'); 
}); 

Answer 2

uso on en lugar de live, live está obsoleta desde últimas versiones de jQuery, su parent() selecciona td elemento, utilice 2 parent() métodos o closest('tr'):

$('input[name="cmdAddRow"]').on('click', function(){ 
      $curRow = $(this).parent().parent(); 
      $newRow = $curRow.clone(true); 
      console.log($newRow); 
      $curRow.after($newRow); 
      console.log('added'); 
}); 

http://jsfiddle.net/qVm75/3/

Answer 3

tiene que usar ya sea $.closest o $.parents en lugar de $.parent como esto

$('input[name="cmdAddRow"]').live('click', function(){ 
     $curRow = $(this).closest('tr'); 
     $newRow = $curRow.clone(true); 
     console.log($newRow); 
     $curRow.after($newRow); 
     console.log('added'); 
    });​ 

Working Fiddle

Y usted debe considerar el uso de $.on como $ .live se deprecia ahora