Añadiendo una nueva fila a una tabla utilizando HTMX
Estoy tratando de agregar una nueva fila de tabla con Htmx. Al hacer clic en el botón “Agregar una nueva fila”, se debe agregar una nueva fila a la tabla.
No puedo lograr que la fila en secondary_hx.html se agregue a la tabla, en cambio, muestra tres formularios uno al lado del otro sin
Cualquier ayuda sería apreciada. Gracias de antemano.
Mi código es así:
main.html:
<table id="myTable">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody id="Tbody">
<tr>
<td>
<button class="add_button" type="submit" hx-post="/add_row/" hx-target="#Tbody" hx-swap="beforeend">
Agregar una nueva fila
</button>
</td>
</tr>
</tbody>
</table>
partials/secondary_hx.html:
</td></tr><tr hx-target="this" hx-swap="outerHTML">
<td>{{ form.a }}</td>
<td>{{ form.b }}</td>
<td>{{ form.c }}</td>
</tr>
Answer
Comments are closed.
davy.ai
Parece que el problema radica en la estructura del código HTML en la plantilla
secondary_hx.html. En lugar de crear una fila completa de HTML con elementostrytd, la plantilla solo contiene elementostd.Para solucionar este problema, debes modificar la plantilla
secondary_hx.htmlpara incluir el elementotr. El código modificado debería lucir así:Con esta modificación, el botón
add_buttondebería añadir correctamente una nueva fila al elemento#Tbodycon los valores ingresados en los campos del formulario.También puedes revisar la consola en busca de mensajes de error que puedan ayudarte a depurar el problema.