Ver Mensaje Individual
  #4 (permalink)  
Antiguo 17/12/2012, 09:45
Avatar de JuJoGuAl
JuJoGuAl
 
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 14 años, 9 meses
Puntos: 19
Respuesta: Insertar campos Dinamicamente

Resolvi mi problema, he aqui el codigo que implemente y use Javascript para ello:

MI tabla HTML:
Código HTML:
Ver original
  1. <form id="tiempoteform" name="tiempoteform" method="post" action="./index.php?page=medicion_tiempo_te" onSubmit="return  val_tiempo_te(this.id)">  
  2.   <div class="form_settings">
  3.         <h3>Fecha de Medicion</h3>
  4.         <input class="contact" type="text" name="fecha1" id="fecha1" readonly="readonly"/>
  5.     <input type="hidden" name="campos" id="campos" value="1" readonly="readonly" />
  6.         <table border="1" cellpadding="0" cellspacing="0" id="tiempotetabla">
  7.           <tr>
  8.                 <td colspan="6"><p align="center" class="tabtitulo">Tiempo de entrega</p></td>
  9.             </tr>
  10.           <tr>
  11.             <td><p align="center" class="tabcamp">Nro. Factura</p></td>
  12.             <td><p align="center" class="tabcamp">Montar t&eacute;</p></td>
  13.             <td><p align="center" class="tabcamp">Armado del vaso</p></td>
  14.             <td><p align="center" class="tabcamp">Armado del t&eacute;</p></td>
  15.             <td><p align="center" class="tabcamp">Tiempo total</p></td>
  16.             <td><p align="center" class="tabcamp">Turno</p></td>
  17.           </tr>
  18.           <tr>
  19.             <td><input type="text" name="tiempotefact1" id="tiempotefact1" onKeyPress="return acceptNum(event)" maxlength="10" size="8" /></td>
  20.             <td><input type="text" name="tiempotemontar1" id="tiempotemontar1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempotetotal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="8" /></td>
  21.             <td><input type="text" name="tiempotearmadov1" id="tiempotearmadov1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempotetotal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="8" /></td>
  22.             <td><input type="text" name="tiempotearmadot1" id="tiempotearmadot1" onBlur="calcular('tiempotemontar1','tiempotearmadov1','tiempotearmadot1','tiempotetotal1',this.id)" onKeyUp="mascara(this,':',patron2,true)" maxlength="6" size="8" /></td>
  23.             <td><input name="tiempotetotal1" type="text" id="tiempotetotal1" readonly="readonly" size="8" /></td>
  24.             <td><select name="tiempoteturno">
  25.               <option value="2">Vespertino</option>
  26.               <option value="3">Nocturno</option>
  27.             </select></td>
  28.           </tr>          
  29.     </table>
  30.         <h5 align="right"><a onclick="crear_elemento_te(tiempotetabla,'campos')">Agregar</a> / <a onclick="borrar_elemento_te(tiempotetabla,'campos')">Quitar</a></h5>
  31.         <p><input class="submit" type="submit" name="guardar1" value="Registrar"/>
  32.         <input class="submit" name="borrar" type="reset" value="Limpiar Datos"/></p>          
  33.   </div>
  34. </form>

Javascript para Agregar/Borrar filas
Código Javascript:
Ver original
  1. function crear_elemento_te(obj,hidden)
  2. {
  3.     var num = document.getElementById(hidden).value;   
  4.     if (num<6)
  5.     {
  6.         nuevaFila = document.getElementById('tiempotetabla').insertRow(-1);
  7.         nuevaFila.id=num;
  8.         nuevaCelda=nuevaFila.insertCell(-1);
  9.         nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotefact"+num+"' id='tiempotefact"+num+"' onKeyPress='return acceptNum(event)' maxlength='10'></td>";
  10.         nuevaCelda=nuevaFila.insertCell(-1);
  11.         nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotemontar"+num+"' id='tiempotemontar"+num+"' onKeyUp='mascara(this,\":\",patron2,true)' maxlength='6' onBlur='calcular(\"tiempotemontar"+num+"\",\"tiempotearmadov"+num+"\",\"tiempotearmadot"+num+"\",\"tiempotetotal"+num+"\",this.id)'></td>";
  12.         nuevaCelda=nuevaFila.insertCell(-1);
  13.         nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotearmadov"+num+"' id='tiempotearmadov"+num+"' onKeyUp='mascara(this,\":\",patron2,true)' maxlength='6' onBlur='calcular(\"tiempotemontar"+num+"\",\"tiempotearmadov"+num+"\",\"tiempotearmadot"+num+"\",\"tiempotetotal"+num+"\",this.id)'></td>";
  14.         nuevaCelda=nuevaFila.insertCell(-1);
  15.         nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotearmadot"+num+"' id='tiempotearmadot"+num+"' onKeyUp='mascara(this,\":\",patron2,true)' maxlength='6' onBlur='calcular(\"tiempotemontar"+num+"\",\"tiempotearmadov"+num+"\",\"tiempotearmadot"+num+"\",\"tiempotetotal"+num+"\",this.id)'></td>";
  16.         nuevaCelda=nuevaFila.insertCell(-1);
  17.         nuevaCelda.innerHTML="<td><input type='text' size='8' name='tiempotetotal"+num+"' id='tiempotetotal"+num+"' readonly='readonly'></td>";
  18.         nuevaCelda=nuevaFila.insertCell(-1);
  19.         nuevaCelda.innerHTML="<td><select name='tiempoteturno'><option value='2'>Vespertino</option><option value='3'>Nocturno</option></select></td>";
  20.         num++;
  21.         document.getElementById(hidden).value=num;
  22.     }
  23.     else
  24.     {
  25.         alert('Solo se pueden a\u00f1adir 6 Registros por dia!');
  26.     }
  27. }
  28. function borrar_elemento_te(obj,hidden)
  29. {
  30.     var num = document.getElementById(hidden).value;   
  31.     if (num>1)
  32.     {
  33.         nuevaFila = document.getElementById('tiempotetabla').deleteRow(-1);
  34.         num--;
  35.         document.getElementById(hidden).value=num;
  36.     }
  37.     else
  38.     {
  39.         alert('No puede Borrar todos los renglones!');
  40.     }
  41. }