Ver Mensaje Individual
  #3 (permalink)  
Antiguo 07/11/2014, 09:07
mauritosuarez
 
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 278
Antigüedad: 10 años, 4 meses
Puntos: 12
Respuesta: Agregar textbox y combobox dinamicamente

Hola axelb, te paso el código.

HTML

Código HTML:
Ver original
  1. <form id="formestrucfile" name="formestrucfile" action="" method="post">
  2.                             <input type="hidden" name="crearestructfile" value="si" />
  3.                             <input type="hidden" name="id" value="<?php print $_GET["id"]; ?>" />
  4.                             <input type="hidden" id="colfija" value="<?php print $colfija; ?>" />
  5.                             <input type="hidden" id="estructura" value="<?php print $estructura ?>" />
  6.                             <input type="hidden" id="cargafecha" value="<?php print $cargafecha; ?>" />
  7.                             <input type="hidden" id="cargalogal" value="<?php print $cargalocal; ?>" />
  8.                             <input type="hidden" id="noreportalocal" value="<?php print $noreportalocal; ?>" />
  9.                             <table id="tabla" class="table">
  10.                                 <tbody>
  11.                                     <tr style="font-size: 12px;">
  12.                                         <th style="background-color: #ddd;">Nro Col &nbsp;
  13.                                             <img style="cursor:pointer;" title="Agregar columna" id="plus" src="<?php print Conectar::Url(); ?>img/icon/b_plus.png" /> &nbsp;
  14.                                             <img style="cursor:pointer;" title="Quitar columna" id="minus" src="<?php print Conectar::Url(); ?>img/icon/b_minus.png" />
  15.                                         </th>
  16.                                         <th>Header</th>
  17.                                         <th>Tipo dato</th>
  18.                                         <th>Factor de ajuste</th>
  19.                                         <th>Separador decimal</th>
  20.                                         <th>Corte decimal</th>
  21.                                         <th>Longitud</th>
  22.                                     </tr>
  23.                                     <?php for($i=1; $i < 5; $i++) { ?>
  24.                                         <tr>
  25.                                             <td class="id" style="background-color: #ddd;" >Col <?php print $i; ?></td>
  26.                                             <td>
  27.                                                 <input class="header" type='text' id="header" name="header[]" style="text-transform: uppercase;" />
  28.                                             </td>
  29.                                             <td>
  30.                                                 <select id="<?php print $i; ?>" name="tipodato[]" class="tipodato" style="height: 25px;" onchange="ChangeCombo();">
  31.                                                     <?php $e->ComboTipoDatos(); ?>
  32.                                                 </select>
  33.                                             </td>
  34.                                             <td>
  35.                                                 <input type='text' id="factor" name="factor[]" size="4" class="desabilitar" />
  36.                                             </td>
  37.                                             <td>
  38.                                                 <select id="separador" name="separador[]" style="height: 25px;" class="desabilitar">
  39.                                                     <option value="0">NO APLICA</option>
  40.                                                     <option value="1">. [PUNTO]</option>
  41.                                                     <option value="2">, [COMA]</option>
  42.                                                 </select>
  43.                                             </td>
  44.                                             <td>
  45.                                                 <input type='text' id="cortedec" name="cortedec[]" size="4" class="desabilitarcorte"  />
  46.                                             </td>
  47.                                             <td>
  48.                                                 <input type='text' id="longitud" name="longitud[]" size="4" class="desabilitarlonfija"  />
  49.                                             </td>
  50.                                         </tr>
  51.                                     <?php } ?>
  52.                                 </tbody>
  53.                             </table>
  54.                         </form>
  55. <p class="clear"><button id="btncrearestructura" style="cursor: pointer;"><img alt="" src="<?php echo Conectar::Url(); ?>img/icon/b_save.png" /> Crear estructura de archivo</button></p>


JQUERY
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.  
  3.     $("#plus").click(function() {
  4.         // Obtenemos el total de las columnas
  5.         //var tds=$("#tabla td").length;
  6.  
  7.         // Obtenemos el total de las filas
  8.         var trs=$("#tabla tr").length - 1;
  9.        
  10.         if(trs <= 24) {
  11.             // clonacion de filas en la tabla
  12.             $("#tabla tbody tr:eq("+trs+")").clone().appendTo("#tabla tbody").find('.desabilitar').attr('disabled','disabled');
  13.  
  14.            
  15.             var trs=$("#tabla tr").length - 1;
  16.             $("#tabla .id:last").html('Col '+ trs);
  17.             $("#tabla .header:last").val('');
  18.             $('#tabla .desabilitarlonfija:last').val('');
  19.            
  20.         }else {
  21.             alert("No puede agregar mas de 25 filas.");
  22.         }
  23.     });
  24.        
  25.     /**
  26.      * Funcion para eliminar la ultima columna de la tabla.
  27.      * Si unicamente queda una columna, esta no sera eliminada
  28.      */
  29.     $("#minus").click(function(){
  30.         // Obtenemos el total de columnas (tr) del id "tabla"
  31.         var trs = $("#tabla tr").length;
  32.         // Debe quedar como minimo la fila header table mas una fila
  33.         if(trs > 2)
  34.         {
  35.             // Eliminamos la ultima columna
  36.             $("#tabla tr:last").remove();
  37.         }else {
  38.             alert("Debe contener por lo menos 1 fila.");
  39.         }
  40.     });
  41.  
  42. });


Espero te sirva.

Saludos.
__________________
http://www.sp-vision.net