Jquery y agregar fila a la tabla

Question

Tengo el siguiente código jquery.

var destTable = $("#numbers"); 
$(document).ready(function() { 
    $("#btnAdd").click(function() { 
    //Take the text, and also the ddl value and insert as table row. 
    var newRow = $("<tr><td>hi</td></tr>"); 
    $("#numbers").append(newRow); 
    }); 
}); 

Lo que realmente me gustaría es almacenar una referencia a un elemento una vez y luego utilizarlo desde allí en él.

El código anterior agrega una fila a mi tabla como se esperaba, pero si la uso. $(destTable).append(newRow) o destTable.append(newRow) no pasa nada ¿alguien puede arrojar algo de luz sobre esto para mí?

Gracias

Answer 1

mantener la referencia dentro document.ready:

$(document).ready(function() { 
    var destTable = $("#numbers"); 
    $("#btnAdd").click(function() { 
    //Take the text, and also the ddl value and insert as table row. 
    var newRow = $("<tr><td>hi</td></tr>"); 
    $("#numbers").append(newRow); 
    }); 
}); 

El punto de document.ready es esperar a que el DOM para estar listo; si intenta hacer $('#numbers'); fuera de él (y el código no aparece después del elemento en el documento), el DOM aún no habrá creado este elemento, por lo que no tendrá una referencia adecuada.

Una vez hecho esto, usted debe ser capaz de hacer:

destTable.append(newRow); 

Dentro de la función click. Sin embargo, como última nota, es una práctica común y aceptada preceder a las variables que representan conjuntos jQuery con un $. Así que esto es lo mejor:

var $destTable = $("#numbers"); 

Answer 2

Su puede utilizar appendTo así:

$("<tr><td>Hello</tr><tr>").appendTo("#MyTable > tbody")