Comunidad de diseño web y desarrollo en internet online

problema con elementos dinamicos en js

Citar            
MensajeEscrito el 22 Oct 2009 04:27 am
holaaas, lo que quiero hacer es un select que tiene valores del 0 al 5 si selecciono 2 deberia crearme una tabla con dos filas, eso si lo puedo hacer, pero si vuelvo a seleccionar y eligo 3 me crea otras 3 filas lo que en total serian 5 filas. como puedo hacer para que cada vez que seleccione un numero cree la tabla y si eligo otro se borre y crea otra tabla con las nuevas caracteristicas? he intentado muchas cosas pero no lo logro hacer.

Aqui como ago para crear elementos en js

Código Javascript :

function prueba(){
var num = document.getElementById('select').value; //obtiene el valor del select
var div=document.getElementById('test1'); //aqui se iran  metiendo los campos, es la tabla
for(n=1; n<=num; n++)
    { 
        var tr=document.createElement('tr');
        var td1=document.createElement('td'); 
        var td2=document.createElement('td');
        
        td1.appendChild(document.createTextNode('Identificacion '));
        td2.appendChild(document.createTextNode('Detalles '));

        tr.appendChild(td1); //agregamos los campos td al tr
        tr.appendChild(td2);

        div.appendChild(tr); //finalmente agregamos el tr con sus respectivos td
}
y por otro lado el html

Código HTML :

<select id="select" size="1" name="pruebas" onchange="prueba()" >
      <option value="0">Elegir</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      </select>
<table id="test1"></table>


espero que me ayan entendido y q me puedan ayudar gracias...

Por RanuTo

32 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 22 Oct 2009 05:59 pm
Saludos.. ps ya tengo tu script :P... modifique mucho tu funcion, en lugar de las funciones DOM utilice las fuciones de JS para manipular tablas (q al final dan el mismo resultado) ya que manejando las fuciones DOM tengo brokillas con los IE y con esta todo bien en los navegadores, bueno te dejo el codigo

Código Javascript :

function prueba(idSel,idTabla){ //recibo como parametro los ids para que el codigo lo puedas utilizar en otros lugares y con otros elementos
   var sel=document.getElementById(idSel);//recupero el select
   var tb=document.getElementById(idTabla);//recupero la tabla
   for(i=0; i<sel.value ;i++){   //se itera de 0 hasta el numero que nos diga el value del select   
         if(tb.rows[i]==undefined){//si el row interado no existe
         var tr=tb.insertRow(tb.rows.length);//se crea el row
         tr.insertCell(0).innerHTML="Identificacion "+i;//creo el td 0 y su el texto lo inserto con innerHTML
         tr.insertCell(1).innerHTML="Detalles";//igual que la linea anterior
         }//si existe se pasa a la siguite iteracion
   }//hasta qui tengo los nuevos rows si es que se necesitaron crear
   //ahora eliminamos las celdas que nos sobran
   while(tb.rows.length>sel.value){//mientras que alla mas rows que ls que dice el select
      tb.deleteRow(tb.rows.length-1);//se elimina la utima fila
   }
   //he fin.. servido Señor
   /*
      wariodiaz
      Fco Diaz Ar.
      [email protected]
      [url=htt://www.devtics.com.mx]www.devtics.com.mx[/url]
      @fco
   */
}
</script>

y aqui el cambiesito en el html, solo en la llamada de prueba, esto para que la funcion quede reciclabe

Código HTML :

<select id="select" size="1" name="pruebas" onchange="prueba('select','tabla')" > 
      <option value="0">Elegir</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      </select> 
<table  border="1" id="tabla"></table> 

Por wariodiaz

55 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Oct 2009 02:13 pm
:O no lo puedo creer funciona!! xD
He intentado hacer lo mismo de distintas formas pero he fallado en todas pero tu script es muy bueno gracias muchas gracias ><

Por RanuTo

32 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.