Foros del Web » Programando para Internet » Javascript »

Generar cajas de texto Dinamicos

 Estas en el tema de Generar cajas de texto Dinamicos en el foro de Javascript en Foros del Web. Hola amigos una pregunta Necesito generar cajas de texto como este ejemplo que encontre gracias amigos soy nuevo y no tiendo mucho, agradesco su compresnsion. ...
  #1 (permalink)  
Antiguo 03/08/2015, 10:44
 
Fecha de Ingreso: julio-2015
Ubicación: Colombia Bogota
Mensajes: 72
Antigüedad: 9 años, 5 meses
Puntos: 0
Información Generar cajas de texto Dinamicos
Hola amigos una pregunta

Necesito generar cajas de texto como este ejemplo que encontre gracias amigos
soy nuevo y no tiendo mucho, agradesco su compresnsion.

http://demo.jorgeivanmeza.com/MooTools/dom_tabla/0.2/demo.html
  #2 (permalink)  
Antiguo 03/08/2015, 10:55
Avatar de lauser
Moderator Unix/Linux
  
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 11 años, 5 meses
Puntos: 401
Respuesta: Generar cajas de texto Dinamicos
Con un simple view-source,,,,lo tenias.

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <title>Demo: manipulacion de DOM en tablas con MooTools version 0.1.1</title>
  4.     
  5.     <script type="text/javascript" src="../../lib/mootools-release-1.11.js"></script>
  6.     <script type="text/javascript" src="dom_tabla-0.2.js"></script>
  7.     
  8.     <style type="text/css">
  9.     
  10.     .titulo_columna
  11.     {
  12.         background-color: blue;
  13.         color: white;
  14.         text-weight: bolder;
  15.         text-align: center;
  16.     }
  17.     
  18.     .celda_normal
  19.     {
  20.         background-color: #D3DAED;
  21.     }
  22.     
  23.     </style>
  24.  
  25.     <script type="text/javascript">
  26.  
  27.     ////////////////////////////////////////////////////////////////////////////////
  28.  
  29.     function obtEstructuraRegistro(tablaId)
  30.     {
  31.         var registro = new Array();
  32.  
  33.         if(tablaId == "lista_integrantes")
  34.         {
  35.             registro[0] = { 'elemento': 'input',
  36.                     'type'    : 'checkbox',
  37.                     'id'      : 'marca',
  38.                     'name'    : 'marca' };
  39.  
  40.             registro[1] = { 'elemento'  : 'input',
  41.                     'type'      : 'text',
  42.                     'id'        : 'nombres[]',
  43.                     'name'      : 'nombres[]',
  44.                     'style'     : 'font-size: 11px',
  45.                     'value'     : '',
  46.                     'size'      : '20',
  47.                     'maxlength' : '60' };
  48.  
  49.             registro[2] = { 'elemento'  : 'input',
  50.                     'type'      : 'text',
  51.                     'id'        : 'apellidos[]',
  52.                     'name'      : 'apellidos[]',
  53.                     'style'     : 'font-size: 11px',
  54.                     'value'     : '',
  55.                     'size'      : '20',
  56.                     'maxlength' : '60' };
  57.             
  58.             registro[3] = { 'elemento'  : 'input',
  59.                     'validador' : 'numbers',
  60.                     'type'      : 'text',
  61.                     'id'        : 'edad[]',
  62.                     'name'      : 'edad[]',
  63.                     'style'     : 'font-size: 11px',
  64.                     'value'     : '',
  65.                     'size'      : '4',
  66.                     'maxlength' : '4' };
  67.  
  68.                     registro[4] = { 'elemento' : 'select',
  69.                             'id'       : 'cargo[]',
  70.                             'name'     : 'cargo[]',
  71.                             'style'    : 'font-size: 11px',
  72.                             'value'    : '',
  73.                             'items'  : {'N/S'      : 0, 
  74.                                          'Director' : 1, 
  75.                                      'Técnico'  : 2,
  76.                                      'Operario' : 3,
  77.                                      'Asistente': 4} 
  78.                             };
  79.  
  80.             return registro;
  81.         }
  82.  
  83.         return null;
  84.     }
  85.  
  86.     function obtPropiedadesCampo(tablaId)
  87.     {
  88.         if (tablaId == "lista_integrantes") 
  89.         {
  90.             return {'class': 'celda_normal'};
  91.         }
  92.  
  93.         return null;
  94.     }
  95.  
  96.     function obtPropiedadesFila(tablaId)
  97.     {
  98.         if (tablaId == "lista_integrantes") 
  99.         {
  100.             return {} 
  101.         }
  102.  
  103.         return null;
  104.     }
  105.  
  106.     ////////////////////////////////////////////////////////////////////////////////
  107.         
  108.     </script>
  109.     
  110. </head>
  111. <body>
  112.  
  113. <table id="lista_integrantes" style="width: 50%;">
  114. <tbody>
  115.     <tr class="TDCabecera">
  116.         <td style="text-align: center; font-weight: bold; width: 50px;" class="titulo_columna">Marca</td>
  117.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Nombres</td>
  118.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Apellidos</td>
  119.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Edad</td>
  120.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Cargo</td>
  121.     </tr>
  122. </tbody>
  123. </table>
  124.  
  125. <br />
  126.  
  127. <div>
  128.     <input type="button" value="Agregar" onclick="TDAgregarRegistro('lista_integrantes')" />&nbsp;
  129.     <input type="button" value="Remover" onclick="TDRemoverRegistros('lista_integrantes')" />
  130. </div>
  131. </body>
  132. </html>

PD: deberas crear las tablas.
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
Última edición por lauser; 03/08/2015 a las 11:00
  #3 (permalink)  
Antiguo 03/08/2015, 12:22
 
Fecha de Ingreso: julio-2015
Ubicación: Colombia Bogota
Mensajes: 72
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Generar cajas de texto Dinamicos
Cita:
Iniciado por lauser Ver Mensaje
Con un simple view-source,,,,lo tenias.

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <title>Demo: manipulacion de DOM en tablas con MooTools version 0.1.1</title>
  4.     
  5.     <script type="text/javascript" src="../../lib/mootools-release-1.11.js"></script>
  6.     <script type="text/javascript" src="dom_tabla-0.2.js"></script>
  7.     
  8.     <style type="text/css">
  9.     
  10.     .titulo_columna
  11.     {
  12.         background-color: blue;
  13.         color: white;
  14.         text-weight: bolder;
  15.         text-align: center;
  16.     }
  17.     
  18.     .celda_normal
  19.     {
  20.         background-color: #D3DAED;
  21.     }
  22.     
  23.     </style>
  24.  
  25.     <script type="text/javascript">
  26.  
  27.     ////////////////////////////////////////////////////////////////////////////////
  28.  
  29.     function obtEstructuraRegistro(tablaId)
  30.     {
  31.         var registro = new Array();
  32.  
  33.         if(tablaId == "lista_integrantes")
  34.         {
  35.             registro[0] = { 'elemento': 'input',
  36.                     'type'    : 'checkbox',
  37.                     'id'      : 'marca',
  38.                     'name'    : 'marca' };
  39.  
  40.             registro[1] = { 'elemento'  : 'input',
  41.                     'type'      : 'text',
  42.                     'id'        : 'nombres[]',
  43.                     'name'      : 'nombres[]',
  44.                     'style'     : 'font-size: 11px',
  45.                     'value'     : '',
  46.                     'size'      : '20',
  47.                     'maxlength' : '60' };
  48.  
  49.             registro[2] = { 'elemento'  : 'input',
  50.                     'type'      : 'text',
  51.                     'id'        : 'apellidos[]',
  52.                     'name'      : 'apellidos[]',
  53.                     'style'     : 'font-size: 11px',
  54.                     'value'     : '',
  55.                     'size'      : '20',
  56.                     'maxlength' : '60' };
  57.             
  58.             registro[3] = { 'elemento'  : 'input',
  59.                     'validador' : 'numbers',
  60.                     'type'      : 'text',
  61.                     'id'        : 'edad[]',
  62.                     'name'      : 'edad[]',
  63.                     'style'     : 'font-size: 11px',
  64.                     'value'     : '',
  65.                     'size'      : '4',
  66.                     'maxlength' : '4' };
  67.  
  68.                     registro[4] = { 'elemento' : 'select',
  69.                             'id'       : 'cargo[]',
  70.                             'name'     : 'cargo[]',
  71.                             'style'    : 'font-size: 11px',
  72.                             'value'    : '',
  73.                             'items'  : {'N/S'      : 0, 
  74.                                          'Director' : 1, 
  75.                                      'Técnico'  : 2,
  76.                                      'Operario' : 3,
  77.                                      'Asistente': 4} 
  78.                             };
  79.  
  80.             return registro;
  81.         }
  82.  
  83.         return null;
  84.     }
  85.  
  86.     function obtPropiedadesCampo(tablaId)
  87.     {
  88.         if (tablaId == "lista_integrantes") 
  89.         {
  90.             return {'class': 'celda_normal'};
  91.         }
  92.  
  93.         return null;
  94.     }
  95.  
  96.     function obtPropiedadesFila(tablaId)
  97.     {
  98.         if (tablaId == "lista_integrantes") 
  99.         {
  100.             return {} 
  101.         }
  102.  
  103.         return null;
  104.     }
  105.  
  106.     ////////////////////////////////////////////////////////////////////////////////
  107.         
  108.     </script>
  109.     
  110. </head>
  111. <body>
  112.  
  113. <table id="lista_integrantes" style="width: 50%;">
  114. <tbody>
  115.     <tr class="TDCabecera">
  116.         <td style="text-align: center; font-weight: bold; width: 50px;" class="titulo_columna">Marca</td>
  117.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Nombres</td>
  118.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Apellidos</td>
  119.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Edad</td>
  120.         <td style="text-align: center; font-weight: bold;" class="titulo_columna">Cargo</td>
  121.     </tr>
  122. </tbody>
  123. </table>
  124.  
  125. <br />
  126.  
  127. <div>
  128.     <input type="button" value="Agregar" onclick="TDAgregarRegistro('lista_integrantes')" />&nbsp;
  129.     <input type="button" value="Remover" onclick="TDRemoverRegistros('lista_integrantes')" />
  130. </div>
  131. </body>
  132. </html>

PD: deberas crear las tablas.
Amigo
Pegue el codigo en una hoja en blanco pero no me funciona, no tendi lo de las tablas no se de verdad donde tengo que crear

Etiquetas: cajas, dinamicos, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:49.