Agregar una fila de tabla en jQuery
Estoy usando jQuery para agregar una fila adicional a una tabla como última fila.
Lo he hecho de esta manera:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
¿Existen limitaciones sobre lo que puede agregar a una tabla como esta (como entradas, selecciones, número de filas)? ¿Existe una forma diferente de hacerlo?
No se garantiza que el enfoque que sugiere le brinde el resultado que está buscando; ¿qué pasaría si tuviera, tbodypor ejemplo, un:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Terminarías con lo siguiente:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Por lo tanto, recomendaría este enfoque:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Puede incluir cualquier cosa dentro del after()método siempre que sea HTML válido, incluidas varias filas como en el ejemplo anterior.
Actualización: revisando esta respuesta luego de la actividad reciente con esta pregunta. la falta de párpados hace un buen comentario de que siempre habrá un tbodyen el DOM; esto es cierto, pero sólo si hay al menos una fila. Si no tiene filas, no las habrá tbodya menos que usted mismo haya especificado una.
DaRKoN_ sugiere agregar contenido al tbodyen lugar de agregarlo después del último tr. Esto soluciona el problema de no tener filas, pero aún así no es a prueba de balas ya que, en teoría, podrías tener múltiples tbodyelementos y la fila se agregaría a cada uno de ellos.
Sopesando todo, no estoy seguro de que exista una única solución que tenga en cuenta todos los escenarios posibles. Deberá asegurarse de que el código jQuery coincida con su marcado.
Creo que la solución más segura probablemente sea asegurarse de que tablesiempre incluya al menos uno tbodyen su marcado, incluso si no tiene filas. Sobre esta base, puede utilizar lo siguiente, que funcionará sin importar cuántas filas tenga (y también tendrá en cuenta varios tbodyelementos):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
jQuery tiene una función incorporada para manipular elementos DOM sobre la marcha.
Puedes agregar cualquier cosa a tu tabla como esta:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
Lo $('<some-tag>')que ocurre en jQuery es un objeto de etiqueta que puede tener varios attratributos que se pueden configurar y obtener, además de text, que representa el texto entre la etiqueta aquí: <tag>text</tag>.
Esta es una sangría bastante extraña, pero es más fácil para usted ver lo que sucede en este ejemplo.
Entonces las cosas han cambiado desde que @Luke Bennett respondió esta pregunta. Aquí hay una actualización.
jQuery desde la versión 1.4(?) detecta automáticamente si el elemento que está intentando insertar (usando cualquiera de los métodos append(), prepend(), before()o ) es a y lo inserta en el primero de su tabla o lo envuelve en uno nuevo si no lo hace. existir.after()<tr><tbody><tbody>
Entonces sí, su código de ejemplo es aceptable y funcionará bien con jQuery 1.4+. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
¿ Qué pasaría si tuvieras a <tbody>y a <tfoot>?
Como:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Luego insertaría su nueva fila en el pie de página, no en el cuerpo.
Por lo tanto, la mejor solución es incluir una <tbody>etiqueta y usar .append, en lugar de .after.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Sé que has pedido un método jQuery. Miré mucho y descubrí que podemos hacerlo de una mejor manera que usando JavaScript directamente mediante la siguiente función.
tableObject.insertRow(index)
indexes un número entero que especifica la posición de la fila a insertar (comienza en 0). También se puede utilizar el valor de -1; lo que da como resultado que la nueva fila se insertará en la última posición.
Este parámetro es obligatorio en Firefox y Opera , pero es opcional en Internet Explorer, Chrome y Safari .
Si se omite este parámetro, insertRow()inserta una nueva fila en la última posición en Internet Explorer y en la primera posición en Chrome y Safari.
Funcionará para todas las estructuras aceptables de tablas HTML.
El siguiente ejemplo insertará una fila al final (-1 se usa como índice):
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br />
<button type="button" onclick="displayResult()">Insert new row</button>
</body>
</html>
Espero que ayude.
