Foros del Web » Programando para Internet » Javascript »

Generando una tabla con textbox y text area dinamicamente

Estas en el tema de Generando una tabla con textbox y text area dinamicamente en el foro de Javascript en Foros del Web. Hola! Tengo el siguiente problema, genero dinamicamente los campos en este script tantos como quiera el usuario, pero los genero siempre dentro de tds especificos, ...
  #1 (permalink)  
Antiguo 15/05/2007, 09:32
 
Fecha de Ingreso: agosto-2006
Mensajes: 61
Antigüedad: 17 años, 9 meses
Puntos: 0
Generando una tabla con textbox y text area dinamicamente

Hola!
Tengo el siguiente problema, genero dinamicamente los campos en este script tantos como quiera el usuario, pero los genero siempre dentro de tds especificos, lo que quisiera saber es si hay alguna manera de que pueda generar toda la tabla con los campos independientemente.

Es decir lo que tengo es:
<table>
<tr><td>Campo1, campo2, campo3</td></tr>
<tr><td>Lugar, Lugar2, Lugar3</td></tr>
<tr><td>inicio1, inicio2, inicio3</td></tr>
</table>
Donde Campo1...n y lugar ... n inicio...n son las cajas de texto generadas dinamicamente.
Y lo que quiero es:
<table>
<tr><td>Campo1</td></tr>
<tr><td>Lugar</td></tr><tr>
<td>inicio1</td></tr>
</table>

<table>
<tr><td>Campo2</td></tr>
<tr><td>Lugar2</td></tr><tr>
<td>inicio2</td></tr>
</table>

<table>
<tr><td>Campo3</td></tr>
<tr><td>Lugar3</td></tr><tr>
<td>inicio3</td></tr>
</table>

Les pongo mi codigo para que vean, donde las funciones MakeOne_dos y MakeOne son las que generan las cajas de texto.


<html>
<head>
<!-- Javascript code for the dynamic form elements. -->
<SCRIPT LANGUAGE="JavaScript">
// Declare the form field count javascript variable so you know how many the user have added.
//The CGI.REQUEST_METHOD bit is the CF code for setting this variable back to the count where it was last up to.
var tFormFieldCount = 1;
var tFormFieldList = "";
var tFormFieldCountdos = 1;
var tFormFieldListdos = "";

// Function to dynamically insert the form field to the cell below. If you want textareas or other form elements, just create another function and change the html insert text below.
function MakeOne_dos()
{

document.getElementById('institu').innerHTML += 'Instituci&oacute;n' + tFormFieldCountdos + '<input type="text" name="institucion[' + tFormFieldCountdos + ']"><br>';
document.getElementById('curso').innerHTML += 'Curso<font color="#FFFFFF">___</font>' + tFormFieldCountdos + '<input type="text" name="cursos[' + tFormFieldCountdos + ']"><br>';
// document.getElementById('dirigido').innerHTML += 'Dirigido____' + tFormFieldCountdos + '<input type="text" name="dirigidos[' + tFormFieldCountdos + ']"><br>';
document.getElementById('dirigido').innerHTML += 'Dirigido a ' + tFormFieldCountdos + '<textarea name="dirigidos[' + tFormFieldCountdos + ']" cols=30 rows=2></textarea><br>';
// Populate the form element list.
if (tFormFieldListdos == "")
{
tFormFieldListdos = 'TextInput';
}
else
{
tFormFieldListdos += "," + 'TextInput';
}

document.forms[0].FormFieldCountdos.value = tFormFieldCountdos;
document.forms[0].FormFieldListdos.value = tFormFieldListdos;
tFormFieldCountdos++;
}
// Function to dynamically insert the form field to the cell below. If you want textareas or other form elements, just create another function and change the html insert text below.
function MakeOne()
{

document.getElementById('lugares').innerHTML += 'Lugar<font color="#FFFFFF">________</font>' + tFormFieldCount + '<input type="text" name="lugar[' + tFormFieldCount + ']"><br>';
document.getElementById('fecha_ini').innerHTML += 'Fecha de Inicio<font color="#FFFFFF">_</font>' + tFormFieldCount + '<input type="text" name="inicio[' + tFormFieldCount + ']"><br>';
document.getElementById('fecha_fin').innerHTML += 'Fecha de Fin<font color="#FFFFFF">___</font>' + tFormFieldCount + '<input type="text" name="fin[' + tFormFieldCount + ']"><br>';
document.getElementById('actividades').innerHTML += 'Actividades<font color="#FFFFFF">____</font>' + tFormFieldCount + '<input type="text" name="acti[' + tFormFieldCount + ']"><br>';

// document.getElementById('actividades').innerHTML += 'Form Element ' + tFormFieldCount + '<textarea name="acti' + tFormFieldCount + '" cols=30 rows=3></textarea><br>';
// Populate the form element list.
if (tFormFieldList == "")
{
tFormFieldList = 'TextInput';
}
else
{
tFormFieldList += "," + 'TextInput';
}

document.forms[0].FormFieldCount.value = tFormFieldCount;
document.forms[0].FormFieldList.value = tFormFieldList;
tFormFieldCount++;
}



// Just a function to check if the user have added any text input fields.
function CheckIt()
{

if (tFormFieldCount == 1 )
{
alert('Debes de insertar por lo menos un dato de experiencia profesional');
return false;
}
if (tFormFieldCountdos == 1 )
{
alert('Debes de insertar por lo menos un dato de experiencia en docencia.');
return false;
}

}
</script>
</head>

<body bgcolor="#FFFFFF">
<center>
<b class="titulos">CURRICULUM VITAE PARA INSTRUCTOR</b>
</center>
<!-- Action attribute specify where the form data is to be sent to -->
<!-- Method attribute specify what method the form data is to be sent. POST or GET. Default is GET. -->
<form name="datos" action="instructor_llena_curriculum_mete.php" method="post" onSubmit="return CheckIt();">

<table width="800" cellspacing=0 cellpadding=0 border=1 align="center" class="tableV">
<tr align="center" valign="middle" class="trV">
<td align="center" colspan="2">EXPERIENCIA PROFESIONAL</td>
</tr>
<tr align="center" valign="middle">
<td align="left" class="trV">LUGARES</td>
<td id="lugares" valign="top" align="left">
<!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
<!-- If is POST then you know is from the result page and there's data to be output. -->
</td>
</tr>
<tr align="center" valign="middle">
<td align="left" class="trV">FECHAS DE INICIO</td>
<td id="fecha_ini" valign="top" align="left">
<!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
<!-- If is POST then you know is from the result page and there's data to be output. -->
</td>
</tr>
<tr align="center" valign="middle">
<td align="left" class="trV">FECHAS DE TERMINO</td>
<td id="fecha_fin" valign="top" align="left">
<!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
<!-- If is POST then you know is from the result page and there's data to be output. -->
</td>
</tr>
<tr align="center" valign="middle">
<td align="left" class="trV">ACTIVIDADES</td>
<td id="actividades" valign="top" align="left">
<!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
<!-- If is POST then you know is from the result page and there's data to be output. -->
</td>
</tr>
<tr>
<td align="center" colspan=2>
<!-- Hidden form field to pass the count of the text inputs to the result page. -->
<input type="hidden" name="FormFieldList">
<input type="hidden" name="FormFieldCount">
<input type="button" value="Agregar campos" onClick="MakeOne();" class="button">
</td>
</tr>
</table>

<table width="800" cellspacing=0 cellpadding=0 border=1 align="center" class="tableV">
<tr align="center" valign="middle" class="trV">
<td align="center" colspan="2">EXPERIENCIA DOCENTE Y EN CAPACITACION</td>
</tr>
<tr align="center" valign="middle">
<td align="left" class="trV">INSTITUCION O EMPRESA</td>
<td id="institu" valign="top" align="left">
<!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
<!-- If is POST then you know is from the result page and there's data to be output. -->
</td>
</tr>
<tr align="center" valign="middle">
<td align="left" class="trV">CURSO</td>
<td id="curso" valign="top" align="left">
<!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
<!-- If is POST then you know is from the result page and there's data to be output. -->
</td>
</tr>
<tr align="center" valign="middle">
<td align="left" class="trV">DIRIGIDO A</td>
<td id="dirigido" valign="top" align="left">
<!-- Cold fusion code again to test to see if the request method of this page is POST or GET. -->
<!-- If is POST then you know is from the result page and there's data to be output. -->
</td>
</tr>
<tr>
<td align="center" colspan=2>
<!-- Hidden form field to pass the count of the text inputs to the result page. -->
<input type="hidden" name="FormFieldListdos">
<input type="hidden" name="FormFieldCountdos">
<input type="hidden" name="id_instructor" value="<? echo $id; ?>">
<input type="hidden" name="id_empresa" value="<? echo $id_empresa; ?>">
<input type="button" value="Agregar campos" onClick="MakeOne_dos();" class="button">
</td>
</tr>
</table>
<center>
<input type="submit" value="Aceptar" class="button">
<!-- <input type="button" value="Agregar campo" onClick="MakeOne('Textarea');" class="button"> -->
</center>
</form>
<center>
<form action="instructores_empresas_curriculum.php" name="regresa" method="post">
<input type="hidden" name="id_empresa" value="<? echo $id_empresa; ?>">
<input type="submit" name="atras" class="button" value="Regresar">
</form>
</center>
</body>
</html>

Gracias por su ayuda de antemano
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:10.