Pregunta:

Fecha: 13-04-2017 18:04:34 (En Español)

Agregar filas dinámicamente (en el DOM) a una tabla HTML[Resuelta]

Saludos, estoy usando un demo para agregar filas dinamicamente a una tabla, esta es la direccion: http://demo.jorgeivanmeza.com/MooTools/dom_tabla/0.2/demo.html, lo que quiero hacer es presentar solo el campo para el nombre y apellidos, sin embargo al eliminar el campo para el cargo el boton de agregar no funciona, de que manera se podría solucionar, gracias. Etiquetas: HTML - Javascript - JQuery - Pregunta Votos: 2 - Respuestas: 6 - Vistas: 20 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

Fernando Mosquera Karma: 10241

Fecha: 15-04-2017 15:47:12 Hola HQM, estuve analizando el código de la demo que comentas, y claro, es lógico que una vez que borres las columnas "edad" y "cargo" falle, porque en la función JavaScript obtEstructuraRegistro() la estructura informada si tiene esos campos (no solo tienes que quitarlos del HTML, sino también adaptar las funciones JavaScript).

Para tu caso puntual, eliminas los siguientes TD de la tabla HTML:

<td style="text-align: center; font-weight: bold;" class="titulo_columna">Edad</td>
<td style="text-align: center; font-weight: bold;" class="titulo_columna">Cargo</td>

Y remplazas la función obtEstructuraRegistro() por la siguiente:

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',
            'type': 'text',
            'id': 'nombres[]',
            'name': 'nombres[]',
            'style': 'font-size: 11px',
            'value': '',
            'size': '20',
            'maxlength': '60'};

        registro[2] = {'elemento': 'input',
            'type': 'text',
            'id': 'apellidos[]',
            'name': 'apellidos[]',
            'style': 'font-size: 11px',
            'value': '',
            'size': '20',
            'maxlength': '60'};

        return registro;
    }

    return null;
}

Este cambio lo he probado y funciona perfectamente, si no te mal entendi esta debería ser tu solución (si fuera el caso, no olvides cambiar el estado de la pregunta a "resuelta")

Ahora bien, aprovechando que baje la demo y la trabaje un poco, aquí les dejo el código completo 100% funcional. La demo esta compuesta de los siguientes 3 archivos, los crean y los colocan todos en la misma carpeta (vale aclarar que por ser HTML y JavaScript no se requiere de un servidor web como Apache, etc... , tan solo haciendo doble clic sobre index.html ya lo pueden probar).

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo: manipulación de DOM en tablas con MooTools versión 0.1.1</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.js"></script>
        <script type="text/javascript" src="funciones.js"></script>
    </head>
    <body>
        <table id="lista_integrantes" style="width: 50%;">
            <tbody>
                <tr class="TDCabecera">
                    <td style="text-align: center; font-weight: bold; width: 50px;" class="titulo_columna">Marca</td>
                    <td style="text-align: center; font-weight: bold;" class="titulo_columna">Nombres</td>
                    <td style="text-align: center; font-weight: bold;" class="titulo_columna">Apellidos</td>
                </tr>
            </tbody>
        </table>
        <br>
        <div>
            <input value="Agregar" onclick="TDAgregarRegistro('lista_integrantes')" type="button">&nbsp;
            <input value="Remover" onclick="TDRemoverRegistros('lista_integrantes')" type="button">
        </div>
    </body>
</html>

mootools.js <-- Cambie el framework mootools por la última versión a la actualidad, la 1.6.0 (y funciona ok). Este archivo obviamente lo descargan de la web oficial del proveedor https://mootools.net/core o bién lo pueden usar desde el repositorio de Google (como hice para mi ejemplo http://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.js).

funciones.js

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);
}

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',
            'type': 'text',
            'id': 'nombres[]',
            'name': 'nombres[]',
            'style': 'font-size: 11px',
            'value': '',
            'size': '20',
            'maxlength': '60'};

        registro[2] = {'elemento': 'input',
            'type': 'text',
            'id': 'apellidos[]',
            'name': 'apellidos[]',
            'style': 'font-size: 11px',
            'value': '',
            'size': '20',
            'maxlength': '60'};

        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;
}

Saludos y buen código! Votos: 5 - Link respuesta

2

Anonimo Anonimo Karma: -4

Fecha: 16-04-2017 10:56:27 Estoy trabajando con la librearía TaffyDB, y para hacer lo que es la pregunta es muy útil.

Saludos

DIEGO Votos: 2 - Link respuesta
0

Gustavo Sanchez Karma: 1085

Fecha: 16-04-2017 16:35:38 Hola Diego, podras compartir algún ejemplo?

Muchas gracias Fernando por el aporte, +1 para ambos.

Saludos a todos! Votos: 0 - Link respuesta
1

Anonimo Anonimo Karma: -4

Fecha: 16-04-2017 17:20:24 La página oficial es http://taffydb.com/ y especificamente el método para crear filas dinámicamente es supplant(). Recibe como parámetros los <tr><td></td></tr> necesarios y entre {} el nombre del campo que tiene el valor. Ahora mismo no estoy en la pc donde estoy utilizando esto. Votos: 1 - Link respuesta
1

Horacio Q Karma: 125

Fecha: 17-04-2017 07:11:15 Muchas gracias Fernando, funciona perfectamente Votos: 1 - Link respuesta
1

Qué Código Karma: 2708

Fecha: 24-04-2017 14:55:43 Hola,
te recomiendo ver este link
Saludos, Votos: 1 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Agregar filas dinámicamente (en el DOM) a una tabla HTML[Resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta