Jugando con InnerHTML

Con este ejemplo muy sencillo es posible agregar filas de una tabla en el lado del cliente sin hacer un requerimiento al servidor y ahorrarse uno la consabida lentitud, útil en momentos de agregar items a una lista. Obviamente, a diferencia de Ajax, los elementos sólo viven en el lado del cliente hasta que se envían, en un sólo requerimiento, hacia el servidor donde son almacenados en la base de datos.

La idea es crear una tabla (info) que va a contener los datos.

<table id="info" name="info" class="tabla">
<tr class="titulos">
<td>
Nombres
</td>
<td>
Apellidos
</td>
</tr>
</table>

Un formulario desde el cual se agregarán nueva información.

<form id="datos" name="datos" onsubmit="return agregar_fila(this)">
Nombres: <input type="text" id="nombres" name="nombres" value="" size="25" />
Apellidos: <input type="text" id="apellidos" name="apellidos" value="" size="25" />

<input type="submit" id="agregar" name="agregar" value="Agregar" />
</form>

Y una función de JavaScript que agregará la nueva información (nombres y apellidos) a la tabla.

function agregar_fila(origen)
{
nom = origen.nombres.value;
apl = origen.apellidos.value;

document.getElementById("info").innerHTML += "<tr class='fila'>
<td>
" + nom + "
</td>
<td>
" + apl + "
</td>
</tr>";

return false;
}

El archivo de ejemplo puede descargarse desde el siguiente enlace: test_inner.html

Leave a Reply

Your email address will not be published. Required fields are marked *