inconveniente con DOM

[anion0x]

Necesito crear algo como esto:

<tr>
<th><label for="modulos">Cantidad de Módulos</label></th>
<td><input class="small" name="modulos" type="text" id="modulos" size="4" maxlength="10"></td>
</tr>

Quiero crearlo desde JS. Y agregarlo a una tabla que tengo. Hice lo siguiente hasta ahora:

Código:

function cantidadElementos(sel) {
	
	var refToSel = sel.name;
		

	if(sel.selectedIndex == 1) {
	
		alert("TEXTO");
		
	} else {
		
		alert("LISTA");
		
		var tabla = document.getElementById("tablastep2");
		
		var row = document.createElement("tr");
		
		var td = document.createElement("td");
		
		var th = document.createElement("th");
		
		var label = document.createElement("label");
		
		label.setAttribute("for", "modulo");
		label.setAttribute("value", "Cant. Modulos");
		
		var input = document.createElement("input");
		input.setAttribute("type","text");
		input.setAttribute("name",'modulo');
		
		

		th.appendChild(label);

		row.appendChild(td);
		
		row.appendChild(th);
		
		td.appendChild(input);
		
		tabla.appendChild(row);		
	}
	
}

Quisiera que se agregue aca:

Código:

         <table name ="tablastep2" id = "tablastep2">
         <?php
			
			for($i = 1; $i <= $_POST['modulos']; $i++) { ?>

          <tr>
            <th><label for="modulo">Módulo <?php echo $i?></label></th>
            <td><select name="modulo<?php echo $i?>" id="modulo<?php echo $i?>" onChange="cantidadElementos(this);">
              <option>Seleccione el tipo de módulo...</option>
              <option value ="1">Texto</option>
              <option>Lista</option>
            </select>
            </td>
          </tr>

			<?php
			}	
			?>

        </table>

El problema que tengo es que no se como seguir, como seteo el valor del label?

[caricatos]

Hola:

Para crear Nodos "etiquetas" usas createElement(), y para crear nodos "texto" existe createTextNode() (cuyo parámetro es el texto), y se inserta de la misma manera (appendChild/insertBefore), pero si necesitas datos php me parece que estás perdiendo el tiempo...

Saludos

[anion0x]

Estuve analizando el tema y me parece que la mejor solucion es agregar loscampos que necesito desde javascript, alguien me puede dar una mano con esto?, la verdad que hace poco que estoy aprendiedno JS y me resulta bastante problematico hacerlo.

Tengo el siguiente codigo:

Código:

        <table>						
          <tr>
            <th><label for="modulo<? echo $i?>">Módulo <?php echo $i?></label></th>
            <td>Tipo: <?php echo $_SESSION["modulo$i"]?></td>
          </tr>
          <tr>
            <th><label for="titModulo<? echo $i?>">Título Modulo</label></th>
            <td><input  class="small" type="text" name="titModulo<? echo $i?>" id="titModulo<? echo $i?>" value="<?echo v("titModulo$i")?>"></td>
          </tr>
          
          <table>
          <tr>
            <td colspan="2"><h4>Item <?php echo $n ?></h4></td>
          </tr>          
          <tr>
            <th><label for="titLista<? echo $n?>">Título lista</label></th>
            <td><input  class="small" type="text" name="titLista<? echo $i?>" id="titLista<? echo $i?>" value="<?echo v("titLista$i")?>"></td>
          </tr>
          <tr>
            <th><label for="detalle<? echo $n?>">Detalle</label></th>
            <td><input  class="small" type="text" name="detalle<? echo $i?>" id="detalle<? echo $i?>" value="<?echo v("detalle$i")?>"></td>
          </tr>
          <tr>
            <th><label for="importe<? echo $n?>">
                <input class="none" type="checkbox" name="si<? echo $i?>" id="si<? echo $i?>" />
            Incluir importe</label></th>
            <td><input  class="small" name="importe<? echo $i?>" type="text" id="importe<? echo $i?>" value="<?echo v("importe$i")?>" size="4" maxlength="10"></td>
          </tr>
          </table>
     
        </table>
<p><a href="#">[+] Agregar nuevo item</a></p>

Lo que necesitaria seria que cada vez que hago click sobre Agregar nuevo item, me agregue un nuevo item.

O sea necesito generar en forma dinamica esta parte. Donde dice Item <?php echo $n ?> tendria que ser incremental al que ya existe, por ej: Item 1, Item 2, se entiende?

Código:

          <tr>
            <td colspan="2"><h4>Item <?php echo $n ?></h4></td>
          </tr>          
          <tr>
            <th><label for="titLista<? echo $n?>">Título lista</label></th>
            <td><input  class="small" type="text" name="titLista<? echo $i?>" id="titLista<? echo $i?>" value="<?echo v("titLista$i")?>"></td>
          </tr>
          <tr>
            <th><label for="detalle<? echo $n?>">Detalle</label></th>
            <td><input  class="small" type="text" name="detalle<? echo $i?>" id="detalle<? echo $i?>" value="<?echo v("detalle$i")?>"></td>
          </tr>
          <tr>
            <th><label for="importe<? echo $n?>">
                <input class="none" type="checkbox" name="si<? echo $i?>" id="si<? echo $i?>" />
            Incluir importe</label></th>
            <td><input  class="small" name="importe<? echo $i?>" type="text" id="importe<? echo $i?>" value="<?echo v("importe$i")?>" size="4" maxlength="10"></td>
          </tr>

Gracias de ante mano.

[anion0x]

Pude realizarlo, funciona perfecto en el firefox, pero no es asi en el IE. Alguien puede ver el codigo y decirme que puede ser que lo estoy haciendo mal?
O como me doy cuenta del error, la verdad es que estoy un poco perdido.

Código:

function agregarItem(tbody) {
	
	var tabla = document.getElementById(tbody);
	
	var tr = document.createElement("tr");
	var td = document.createElement("td");
	var h4 = document.createElement("h4");
	var txt = document.createTextNode("Item");
	
	td.setAttribute('colspan','2');
	
	h4.appendChild(txt);
	td.appendChild(h4);
	tr.appendChild(td);
	
	tabla.appendChild(tr);
	
	var tr2 = document.createElement("tr");
	var th2 = document.createElement("th");
	var td2 = document.createElement("td");
	var label = document.createElement("label");
	var txt2 = document.createTextNode("Titulo Lista");
	var input_titulo = document.createElement("input");
	
	input_titulo.setAttribute('type','text');
	input_titulo.setAttribute('name','nombreTitulo');
	input_titulo.setAttribute('class','small');
	

	
	td2.appendChild(input_titulo);
	label.appendChild(txt2);
	th2.appendChild(label);
	
	tr2.appendChild(th2);
	tr2.appendChild(td2);
	
		
	tabla.appendChild(tr2);
	
	
	var tr3 = document.createElement("tr");
	var th3 = document.createElement("th");
	var td3 = document.createElement("td");
	var label3 = document.createElement("label");
	var txt3 = document.createTextNode("Detalle");
	var input_titulo3 = document.createElement("input");
	
	input_titulo3.setAttribute('type','text');
	input_titulo3.setAttribute('name','detalleTitulo');
	input_titulo3.setAttribute('class','small');
	
	
	td3.appendChild(input_titulo3);
	label3.appendChild(txt3);
	th3.appendChild(label3);
	
	tr3.appendChild(th3);
	tr3.appendChild(td3);
	
		
	tabla.appendChild(tr3);


	var tr4 = document.createElement("tr");
	var th4 = document.createElement("th");
	var td4 = document.createElement("td");
	var label4 = document.createElement("label");
	var txt4 = document.createTextNode(" Incluir importe");
	var input_titulo4 = document.createElement("input");
	var check4 = document.createElement("input");
	
	input_titulo4.setAttribute('type','text');
	input_titulo4.setAttribute('name','importeTitulo');
	input_titulo4.setAttribute('class','small');
	
	check4.setAttribute('type','checkbox');
	check4.setAttribute('name','si');
	check4.setAttribute('class','none');
	
	
	td4.appendChild(input_titulo4);
	label4.appendChild(txt4);
	th4.appendChild(check4);
	th4.appendChild(label4);

	
	tr4.appendChild(th4);
	tr4.appendChild(td4);
	
		
	tabla.appendChild(tr4);



}

[caricatos]

Hola:

Parece estar bien, pero sería necesario saber el error que provoca... Un problema que conozco de la inserción dinámica de elementos es que el atributo name se asigna bien, pero luego no se puede referenciar por ese atributo, aunque el envío sea correcto... y si insertas elementos en una tabla no debes obviar el tag tbody.

Pero mejor es saber el problema.

Saludos

[anion0x]

gracias, al final lo solucione, ya que al setear un atributo class, habia una diferencia entre IE y FF. Pongo el ejemplo por si a alguien le es util.

Código:

	if(navegador == "Netscape") {
		input_titulo.setAttribute('class','small');
	} else {
		input_titulo.setAttribute('className','small');
	}

[caricatos]

Hola:

className es lo que tienes que usar siempre... puedes quitar la condición tranquilamemte y usar siempre className.

Saludos