tabla + DOM

anion0x · #1 (**permalink**) 22/06/2008, 14:12

Hola, tengo la siguiente tabla:

Código:

			<table id="divTxt">
              <tr>
                <th><label for="secundario">Título Secundario</label></th>
                <td><input type="text" name="secundario" id="secundario" value="<?=v('secundario')?>" /></td>
                <th><label for="institucion">Institución</label></th>
                <td><input type="text" name="institucion" id="institucion" value="<?=v('institucion')?>" /></td>
                </tr>
              <tr>
                <th><label for="universitario">Título Universitario</label></th>
                <td><input type="text" name="universitario" id="universitario" value="<?=v('universitario')?>" /></td>
                <th><label for="institucion2">Institución</label></th>
                <td><input type="text" name="institucion2" id="institucion2" value="<?=v('institucion2')?>" /></td>
              </tr>
              <tr>
                <th><label for="idiomas">Idiomas</label></th>
                <td><input type="text" name="idiomas" id="idiomas" value="<?=v('idiomas')?>" /></td>
                <th><label for="domIdioma">% de dominio</label></th>
                <td><input class="short" type="text" name="domIdioma" id="domIdioma" value="<?=v('domIdioma')?>" /> <a href="#" onClick="newInput(); return false;">[+] Agregar</a>
			  </tr>
			  <tr>
                <th><label for="sistemas">Manejo de sistemas</label></th>
                <td><input type="text" name="sistemas" id="sistemas" value="<?=v('sistemas')?>" /></td>
                <th><label for="domIdioma">% de dominio</label></th>
                <td><input class="short" type="text" name="domSistema" id="domSistema" value="<?=v('domSistema')?>" /> <a href="#" onClick="addSistema(); return false;">[+] Agregar sistema</a></td>
              </tr>
              <tr>
                <th><label for="estudia">Estudia actualmente</label></th>
                <td><input class="short" name="estudia" type="radio" value="si" /><label for="si">Si</label> <input class="short" name="est_act" type="radio" value="no" /><label for="no">No</label></td>
                <th><label for="carrera">Carrera</label></th>
                <td><input type="text" name="carrera" id="carrera" value="<?=v('carrera')?>" /></td>
              </tr>
            </table>

Lo que necesito es cuando hago click en a:

Código:

<a href="#" onClick="newInput(); return false;">[+] Agregar sistema</a>

Me agregue lo siguiente:

Código:

              <tr>
                <th><label for="idiomas">Idiomas</label></th>
                <td><input type="text" name="idiomas" id="idiomas" value="<?=v('idiomas')?>" /></td>
                <th><label for="domIdioma">% de dominio</label></th>
                <td><input class="short" type="text" name="domIdioma" id="domIdioma" value="<?=v('domIdioma')?>" /> <a href="#" onClick="addIdioma(); return false;">[+] Agregar</a>
			  </tr>

Hasta ahora lo que tengo hecho es esto:

Código:

	<script type="text/javascript">
	/*<![CDATA[*/
	var c=0;
	function newInput()
	{
		var table = document.getElementById("#divTxt");
		var row = document.createElement("tr");
		var th = document.createElement("th");
		var td = document.createElement("td");
		
		var label1 = docuemnt.createElement("label");
		labe1.value = "Idiomas:";
		
		var inpt1 = document.createElement('input');
		inpt1.type="text";
		inpt1.name="idioma_"+c;
		inpt1.id="idioma_"+c;
		
		th.appendChild(label1);
		td.appendChild(inpt1);
		
		var label2 = docuemnt.createElement("label");
		labe2.value = "% de dominio:";
		
		var inpt2 = document.createElement('input');
		inpt2.type="text";
		inpt2.name="porcentaje_idioma_"+c;
		inpt2.id="porcentaje_idioma_"+c;
		
				
		c+=1;
		
		document.th.appendChild(td);
		document.row.appendChild(th);

		
		document.divTxt.appendChild(row);

	}
	/*]]>*/
	</script>

No se como terminarlo, soy nuevo con javascript.

anion0x · #2 (**permalink**) 22/06/2008, 14:45

lo estoy intentando hacer con innerHTML, pero tampoco me anda. Aca pongo el codigo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>sin título</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.14" />
	<script type="text/javascript">
	/*<![CDATA[*/
	
	var c=0;
	function addIdioma()
	{
				
		string = "<tr><th><label for=\"idiomas\">Idiomas</label></th>";
	
		string += "<td><input type=\"text\" name=\"idiomas\"" + c + " id=\"idiomas\" /></td>";      
  
		string += "<th><label for=\"domIdioma\">% de dominio</label></th>" ;
	
		string +=  "<td><input class=\"short\" type=\"text\" name=\"domIdioma\"" + c + "id=\"domIdioma\" />";
 
		string += "</tr>";		

		c++;

		document.getElementById("tabla").innerHTML = string;
	}
	/*]]>*/
	</script>
</head>

<body>

<form action="session4.php" method="get"  name="f1">
<table id="tabla">
              <tr>
                <th><label for="idiomas">Idiomas</label></th>
                <td><input type="text" name="idiomas" id="idiomas" value="" /></td>
                <th><label for="domIdioma">% de dominio</label></th>
                <td><input class="short" type="text" name="domIdioma" id="domIdioma" value="" /> <a href="#" onClick="addIdioma(); return false;">[+] Agregar</a>
			  </tr>
</table>

<?php
	foreach($_GET as $key => $value) {
		echo "<br>$key => $value";		
	}

?>
<input type="submit" value="enviar">
</form>	
</body>
</html>