Autor Tema: JavaScript Página con tabla dinamica: Editar tablas Ejercicio resuelto CU01139E (Leído 2687 veces)

cristiannd · « **en:** 25 de Abril 2020, 04:23 »

Dejo la resolución del ejercicio CU01139E del curso de desarrollo web con JavaScript. Cabe destacar que lo resolví sin leer las orientaciones para la solución, por eso la diferencia de código con el propuesto.

Citar

Se desea que al pulsar en el texto Editar de la columna Acciones, ocurra lo siguiente:

a) El texto de esa columna que ponía <<Editar>> en color azul, será reemplazado por el texto <<En edición>> en color gris o negro.

b) Los datos en la fila correspondiente se convertirán en casillas de texto editables de modo que el usuario pueda modificar los datos de esa fila.

c) Debe aparecer en la parte inferior de la tabla el texto: <<Pulse Aceptar para guardar los cambios o cancelar para anularlos>> y dos botones: Aceptar y Cancelar, que podrán ser pulsados por el usuario para Aceptar los cambios o para cancelar.

Si el usuario pulsa en el botón Aceptar los datos de la fila en edición deben ser enviados a una url de destino por el método get. Por ejemplo si la url de destino es aprenderaprogramar.com y editáramos la fila correspondiente a Fresa y pulsamos aceptar, el navegador debe enviarnos a una url como esta:

http://aprenderaprogramar.com/?alimento=Fresa&calorias=57&grasas=1.5&proteina=0.4&carbohidratos=12.8

Atención: los datos que se deben enviar a la url de destino son los datos editados por el usuario, no los datos originales de la tabla.

Si el usuario pulsa en Cancelar se recargará la tabla original (de forma que no habrá ninguna fila en edición).

Si estando seleccionada una fila en edición el usuario pulsa sobre Editar en otra fila, se mostrará un mensaje indicando lo siguiente: “Solo se puede editar una línea. Recargue la página para poder editar otra”.

Al código lo realicé en un solo archivo, aun que lo más óptimo hubiese sido hacer 3 archivos archivos diferentes.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01139E</title>
    <style>
        table {
            padding: auto;
            margin: auto;
            background-color: black;
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
            border: 1px black solid;
        }

        th, td {
            background-color: goldenrod;
            width: 170px;
            height: 50px;
        }

        button {
            padding: 5px;
            margin: 5px;
            float: left;
        }

        .editar {
            color: blue;
            cursor: pointer;
        } 

        .enEdicion {
            color: black;
            font-style: italic;
        }

        input {
            width: 120px;
            height: 15px;
            font-size: 15px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    </style>
        
    <script>
        fila = 0;
        function editar(numeroFila){
            var filas = document.getElementsByTagName('tr');
            fila = fila + (numeroFila/numeroFila);

            if(fila > 1){
                alert('Solo se puede editar una línea. Recargue la página para poder editar otra');
            } else {
                filas[numeroFila].childNodes[1].innerHTML = '<input type="text" name="Alimento">';
                filas[numeroFila].childNodes[3].innerHTML = '<input type="text" name="Calorias">';
                filas[numeroFila].childNodes[5].innerHTML = '<input type="text" name="Grasas">';
                filas[numeroFila].childNodes[7].innerHTML = '<input type="text" name="Proteinas">';
                filas[numeroFila].childNodes[9].innerHTML = '<input type="text" name="Carbohidratos">';
                document.getElementsByTagName('tr')[numeroFila].childNodes[11].textContent = 'En edición';
                document.getElementsByTagName('tr')[numeroFila].childNodes[11].classList.add('enEdicion');

                document.body.getElementsByTagName('div')[0].textContent = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos';
                document.body.getElementsByTagName('div')[1].innerHTML = '<button type="submit" class="boton" id="aceptar">Aceptar</button>';
                document.body.getElementsByTagName('div')[2].innerHTML = '<button type="reset" class="boton" id="cancelar" onclick="location.reload()">Cancelar</button>';
            }
        }
    </script>
</head>
<body>
    <form method="GET" action="https://aprenderaprogramar.com">
        <h2 style="text-align: center">Contenido nutricional cada 100 g de alimento</h2>   
        <table>
            <tr>
                <th>Alimento</th>
                <th>Calorías (kCal)</th>
                <th>Grasas (g)</th>
                <th>Proteína (g)</th>
                <th>Carbohidratos (g)</th>
                <th>Acciones</th>
            </tr>
            <tr>
                <td>Arándano</td>
                <td>49</td>
                <td>0.2</td>
                <td>0.4</td>
                <td>12.7</td>
                <td onclick="editar(1)" class="editar">Editar</td>
            </tr>
            <tr>
                <td>Plátano</td>
                <td>90</td>
                <td>0.3</td>
                <td>1.0</td>
                <td>23.5</td>
                <td onclick="editar(2)" class="editar">Editar</td>
            </tr>
            <tr>
                <td>Cereza</td>
                <td>46</td>
                <td>0.4</td>
                <td>0.9</td>
                <td>10.9</td>
                <td onclick="editar(3)" class="editar">Editar</td>
            </tr>
            <tr>
                <td>Fresa</td>
                <td>37</td>
                <td>0.5</td>
                <td>0.8</td>
                <td>8.3</td>
                <td onclick="editar(4)" class="editar">Editar</td>
            </tr>
        </table>
        <div> </div>
        <div class="div1"> </div>
        <div class="div1"> </div>
    </form>
</body>
</html>

Ogramar · « **Respuesta #1 en:** 25 de Septiembre 2020, 14:27 »

Buenas, el ejercicio está bien resuelto y cumple con lo que se pedía. Hay una cosa que puede llamar la atención: cuando se pulsa editar, dejan de verse los valores que existían en la fila, lo cual resulta un poco extraño porque a lo mejor se quiere editar un dato concreto sin modificar los demás pero no lo permite. Puede verse una solución al ejercicio donde no ocurre esto (los valores existentes se mantienen al pulsar editar, de modo que podemos modificar un dato manteniendo los demás).

Salu2

luisriquelme · « **Respuesta #2 en:** 01 de Noviembre 2020, 22:57 »

Una cosa que me rompio la cabeza y solo pude verlo con la solucion al final es el hecho de poner "input" dentro de un td. Jamas se me hubiera ocurrido. Yo lo que hice fue cambiar los datos con contentEditable en true, y ahi los pude modificar. Despues los puse en una variable llamada "parametros" y se lo asigne a el action. Pero al final, no sucedio nada. Tristisimo. El curso jamas dio una idea de esta posibilidad

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: