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

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
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>
« última modificación: 25 de Septiembre 2020, 14:26 de Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2618
    • Ver Perfil
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

 

Esto es un laboratorio de ideas...
Aprender a programar

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".