Crear elementos XHTML dinámicamente con JScript

Requisitos previos :

•  Conocimientos básicos de html (formas xhtml) y JScript

Un webform en una página Web sirve para transmitir información hacia un servidor. Su uso principal capturar información para su posterior procesaminto. Los webform más comunes son: input text, checkbox, select e input button.

En esta oportunidad se explicaré como se pueden crear estos elementos de manera dinámica utilizando para ello JScript.

La idea general será la siguiente:

Tenemos una tabla  con los siguientes elementos: un input text, un checkbox y un textarea. Los tres elementos se encuentran en un mismo “tr” (fila) cada uno separado por la etiqueta “td”. Por el momento tenemos una tabla con una fila y tres columnas. Además tendremos un botón al que llamaremos “agregar” que se encargará de llamar a la función que replicará la fila.

 Este es código de nuestra tabla:

 <table width=”100%” border=”0″>
 <tbody id=”tabla1″>
  <tr>
    <td><input name=”texto” type=”text”></td>
    <td><input name=”masculino” type=”checkbox” value=”masculino”>
        <input name=”femenino” type=”checkbox” value=”femenino”>
    </td>
    <td><textarea name=”Area” cols=”20″ rows=”2″></textarea></td>
  </tr>
 </tbody>
</table>

Dentro del tbody  se añadirá una nueva línea con los webforms que vamos a generar de manera dinámica. A continuación el código que nos ayudará a generar la nueva línea.

<table>
<tbody id=”tabla2″>
<input name=”boton” type=”button” value=”agregar” onclick=”javascript:Nuevalinea();”>
</tbody>
</table>

Por último la función JScript:

 <script language=”JavaScript”>
/*
Nombre: Agregar elementos XHTML dinámicamente
Parámetros:
          -
Autor:  Willy Peitzner R.
E-mail: wpeitzner@gmail.com
Fecha:  2007-12-10

*/
function Nuevalinea()
{
 var objTBody = document.getElementById(“tabla1″);//tbody
 var objFila  = document.createElement(“tr”);//fila
 var objCelda; //celda
 var objDatos; //webforms que se ubicacran en cada celda

 objCelda = document.createElement(“<td align=’center’>”);
 objDatos = document.createElement(“<input type=’text’ id=’texto’ name=’texto’ maxlength=’10′ size=’8′ value=’1′>”);
 objCelda.appendChild(objDatos); //agrega información a la celda
 objFila.appendChild(objCelda); //agrega la celda a la fila

 objCelda = document.createElement(“<td align=’center’>”);
 objDatos = document.createElement(“<input type=’checkbox’ name=’genero’ value=’masculino’>”);
 objCelda.appendChild(objDatos); //agrega información a la celda
 objDatos = document.createElement(“<input type=’checkbox’ name=’genero’ value=’femenino’>”);
 objCelda.appendChild(objDatos); //agrega información a la celda
 objFila.appendChild(objCelda); //agrega la celda a la fila
 
objCelda = document.createElement(“<td align=’center’>”);
objDatos = document.createElement(“<textarea type=’text’ id=’area’ name=’AreaTexto’ cols=’20′ rows=’1′>”);
objCelda.appendChild(objDatos); //agrega información a la celda
objFila.appendChild(objCelda); //agrega la celda a la fila

objTBody.appendChild(objFila);//agrega la nueva fila a la tabla

}

</script>

Más adelante te explicaré como agregar elementos tipo “select”. Por lo pronto es todo.

Explore posts in the same categories: JavaScript

Tags: JScript

You can comment below, or link to this permanent URL from your own site.