Cajas de textos Dinamicas

kazukyx5 · #1 (**permalink**) 11/08/2015, 15:32

Hola amigos de la programacion
mi tema es un poco dificil pero se que para muchos no lo es.

Solicito ayuda de ustedes ya que tengo este codigo para generar cajas
demo

Código HTML:

Ver original<html>
<head>
    <title>Demo: manipulacion de DOM en tablas con MooTools version 0.1.1</title>
<!-----------Nuevas cajas de texto--------------------------------------------------------------------------------------------------------------------------------------------------------------------> 
    <script type="text/javascript" src="lib/mootools-release-1.11.js"></script>
    <script type="text/javascript" src="dom_tabla-0.2.js"></script>
    <script type="text/javascript">
    ////////////////////////////////////////////////////////////////////////////////
    function obtEstructuraRegistro(tablaId)
    {
        var registro = new Array();
        if(tablaId == "lista_integrantes")
        {
            registro[0] = { 'elemento': 'input',
                    'type'    : 'checkbox',
                    'id'      : 'marca',
                    'name'    : 'marca' };
 
            registro[1] = { 'elemento'  : 'input',
                    'validador' : 'numbers',
          'type'      : 'text',
                    'id'        : 'cantidad[]',
                    'name'      : 'cantidad[]',
                    'style'     : 'font-size: 11px',
                    'value'     : '',
                    'size'      : '20',
                    'maxlength' : '60' };
        
            registro[2] = { 'elemento'  : 'textarea',
                    'type'      : 'textarea',
                    'id'        : 'descripcion[]',
                    'name'      : 'descripcion[]',
                    'style'     : 'font-size: 11px',
                    'value'     : '',
                    'size'      : '20',
                    'maxlength' : '60' };
            
            registro[3] = { 'elemento'  : 'input',
                    'validador' : 'numbers',
                    'type'      : 'text',
                    'id'        : 'inicial[]',
                    'name'      : 'inicial[]',
                    'style'     : 'font-size: 11px',
                    'value'     : '',
                    'size'      : '4',
                    'maxlength' : '4' };
 
                    registro[4] = { 'elemento'  : 'input',
                    'validador' : 'numbers',
                    'type'      : 'text',
                    'id'        : 'final[]',
                    'name'      : 'final[]',
                    'style'     : 'font-size: 11px',
                    'value'     : '',
                    'size'      : '4',
                    'maxlength' : '4' };
            return registro;
        }
        return null;
    }
    function obtPropiedadesCampo(tablaId)
    {
        if (tablaId == "lista_integrantes") 
        {
            return {'class': 'celda_normal'};
        }
        return null;
    }
    function obtPropiedadesFila(tablaId)
    {
        if (tablaId == "lista_integrantes") 
        {
            return {} 
        }
        return null;
    }
    ////////////////////////////////////////////////////////////////////////////////
    </script>
    
</head>
<body>
<form name="form1" method="POST" action="demo2.php">   
<table id="lista_integrantes"  border="1" >
<tbody>
    <tr class="TDCabecera">
        <td  class="titulo_columna">Eliminar</td>
        <td  class="titulo_columna">Cantidad</td>
        <td  class="titulo_columna">Descripcion</td>
    <td  class="titulo_columna">Inicial</td>
        <td  class="titulo_columna">Final</td>
    </tr>
</tbody>
</table>
 
<br />
 
<div>
    <input type="button" value="Agregar" onclick="TDAgregarRegistro('lista_integrantes')" />&nbsp;
    <input type="button" value="Remover" onclick="TDRemoverRegistros('lista_integrantes')" />
  <input type='submit' value='Envia' > <input type='reset' value='borrar'>
</div>
</form>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
</body>
</html>

Código Javascript:

Ver original////////////////////////////////////////////////////////////////////////////////
 
function TDAgregarRegistro(tablaId)
{
    var tabla = $(tablaId);
    var cabecera = $$("#" + tablaId + " #cabecera");
    
    var estructura = obtEstructuraRegistro(tablaId);
 
    if(estructura == null)
    {
        alert("ERROR obteniendo al estructura de '" + tablaId + "'.");
        
        return false;
    }
    
    var registro = new Element('tr', (obtPropiedadesFila(tablaId) != null) ? obtPropiedadesFila(tablaId) : {});
    registro.setProperty('class', registro.getProperty('class') + " TDRegistro");
    
    for(i=0; i<estructura.length; i++)
    {
        var tipo = estructura[i]['elemento'];
        
        delete(estructura[i]['elemento']);
        
        if(tipo == undefined)
        {
            alert("ERROR obteniendo el tipo del elemento #" + i + " de '" + tablaId + "'.");
            
            return false;
        }
        
        var campo = new Element('td', (obtPropiedadesCampo(tablaId) != null) ? obtPropiedadesCampo(tablaId) : {});
        campo.setProperty('class', campo.getProperty('class') + " TDCampo");
        
        if (estructura[i]['id'] == "marca") 
        {
            campo.setStyle('text-align', 'center');
            campo.setProperty('class', campo.getProperty('class') + " TDMarca");
        }
        
        var obj = new Element(tipo, estructura[i]);
        
        if(tipo == "select")
        {
            var opciones = new Array();
            
            if (estructura[i]['items'] != undefined )
            {
                opciones = $H(estructura[i]['items']);
 
                delete(estructura[i]['items'])
            }
        
            opciones.each(function(valor, llave) 
            {
                var option = new Element('option', {'value': valor});
                option.setText(llave);
                
                option.injectInside(obj);
            });
        }
        
        obj.injectInside(campo);
        
        if(estructura[i]['validador'])
        {
            var validador = estructura[i]['validador'];
        
            obj.addEvent('keydown', function(e)
            {
                var ev = new Event(e);
                
                if(ev.code < 32)
                    return false;
                
                // var valor = String.fromCharCode(ev.code);
                var valor = (ev.shift) ? ev.key.toUpperCase() : ev.key.toLowerCase();
 
                var control = TDValidarDato(valor, validador, null);
                
                if (!control)
                    ev.stop();
                    
                return control;
            });
              
            delete(estructura[i]['validador']);
        }
        
        campo.injectInside(registro);
    }
    
    registro.injectInside(tabla.getElement("tbody"));
}
 
function TDRemoverRegistros(tablaId)
{
    var marcas = $$("#" + tablaId + " .TDMarca");
 
    var cantidad = 0;
    
    marcas.each(function(elemento, indice) 
    {
        var marca = elemento.getElement("input[id=marca]");
        
        if(!marca.getProperty('checked'))
            return;
            
        cantidad ++;
        
        var tr = elemento.getParent();
    
        tr.remove();
    }); 
    
    if(cantidad == 0)
        alert("Por favor seleccione las marcas de verificacion\n" + 
              "de los elementos que desea remover.");
              
    return cantidad;
}
 
////////////////////////////////////////////////////////////////////////////////
 
function TDValidarDato(value, type, options)
{
    var regexp = null;
    
    switch(type)
    {
        case 'numbers':             regexp = /^\d+$/; break;
        case 'no_numbers':      regexp = /^\D+$/; break;
        case 'letters_lowercase':   regexp = /^[a-z]+$/; break;
        case 'letters_uppercase':   regexp = /^[A-Z]+$/; break;
        case 'letters_full':        regexp = /^[A-Za-z]+$/; break;
        case 'numbers_letters':     regexp = /^[A-Za-z0-9]+$/; break;
        case 'regexp':          regexp = /options/; break;
    }
    
    if(regexp == null)
    {
        alert("type is invalid: " + type);
        return false;
    }
    
    return regexp.test(value);
}
 
////////////////////////////////////////////////////////////////////////////////

necesito sumar la casilla de cantidad + la casilla inicial y en la caja final aparesca el resultado, y la caja final este readonly="readonly".

Gracias amigos espero me puedan ayudar