Autor Tema: Ejemplo innerHTML JavaScript. Modificar campos de tabla dinámica: edita CU01139E (Leído 4932 veces)

Pandemia · « **en:** 27 de Febrero 2017, 13:11 »

Buenas aquí dejo una posible solución al ejercicio CU01139E del curso de programación web con JavaScript....

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Tabla Nutricional y Alimenticia</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estilos.css">
    <script type="text/javascript" src="functions.js"></script>
</head>

<body>
    <div id="tabla1">
        <form action="https://www.aprenderaprogramar.com" method="get">
            <table>
                <caption>
                    <h3>Contenido nutricional por cada 100 g de alimento.</h3></caption>
                <tr>
                    <th>Alimento</th>
                    <th>Calorías (kCal)</th>
                    <th>Grasas (g)</th>
                    <th>Proteína (g)</th>
                    <th>Carbohidratos (g)</th>
                    <th>Opciones</th>
                </tr>
                <tr>
                    <td>Arándano</td>
                    <td>49</td>
                    <td>0.2</td>
                    <td>0.4</td>
                    <td>12.7</td>
                    <td class="editar" onclick="editarFila(this)">Editar</td>
                </tr>
                <tr>
                    <td>Plátano</td>
                    <td>90</td>
                    <td>0.3</td>
                    <td>1.0</td>
                    <td>23.5</td>
                    <td class="editar" onclick="editarFila(this)">Editar</td>
                </tr>
                <tr>
                    <td>Cereza</td>
                    <td>46</td>
                    <td>0.4</td>
                    <td>0.9</td>
                    <td>10.9</td>
                    <td class="editar" onclick="editarFila(this)">Editar</td>
                </tr>
                <tr>
                    <td>Fresa</td>
                    <td>37</td>
                    <td>0.5</td>
                    <td>0.8</td>
                    <td>8.3</td>
                    <td class="editar" onclick="editarFila(this)">Editar</td>
                </tr>
            </table>
            <div id="botones">
            </div>
        </form>
    </div>
</body>

</html>

CSS

Código: [Seleccionar]

body {
  font-family: Arial, Helvetica, sans-serif;
}

#tabla1 {
  background-color: #f7d27e;
  padding: 11px;
  margin: 45px auto;
  width: 800px;
}

table {
  width: 750px;
  text-align: center;
  border-collapse: collapse;
  margin: 0 auto;
  color: #0066FF;
}

th {
  padding: 11px;
  background-color: #4546ad;
  border-bottom: 1px solid #707485;
  color: #559e3c;
}

td {
  padding: 11px;
  background-color: #e6d10d;
  border-bottom: 1px solid #707485;
  color: #a90a49;
  border-top: 1px solid #707485;
}

tr:hover td {
  background-color: #68b5cd;
  color: #944304;
}

.botones {
  margin: 11px 22px;
  background-color: #3300FF;
  color: #af3804;
}

.editar {
  color: #3300FF;
  cursor: pointer;
}

#texto1 {
  margin: 0 22px;
}

JAVASCRIPT

Código: [Seleccionar]

var datos = new Array();
var enEdicion = true;
var finEditando;
function editarFila(nodo){
	var nodoTd = nodo.previousSibling;
	if (enEdicion==true){
		cambiarEnEdicion(nodo);
		creaBoxTexto(nodoTd);
		var nodoDiv = document.getElementById('botones');
		nodoDiv.innerHTML = '<span id=\'texto1\'>Pulse Aceptar para guardar los cambios o cancelar para anularlos.</span><br/><br/>' +
			'<input type=\'submit\' value=\'Aceptar\' class=\'boton\'><input type=\'reset\' value=\'Cancelar\' class=\'boton\' onclick=\'reiniciarFila()\'>';
		enEdicion = false;
	}else{
		alert('Solo se puede editar una línea. Recargue la página para poder editar.')
	}
}
function creaBoxTexto(nodoTd){
	var thForm = ['alimento', 'calorias', 'grasas', 'proteina', 'carbohidratos'];
	var orden = new Array();
	for(var i=0; i<5; i++){
		datos[i] = nodoTd.textContent;
		orden = '<input type=\'text\' style=\'width:70px\' name=\'' + thForm[i] + '\' value=\'' + nodoTd.textContent + '\'>';
		nodoTd.innerHTML = orden;
		if(i<4){nodoTd = nodoTd.previousSibling;}
	}
	finEditado = nodoTd;
}
function reiniciarFila(){
	var nodoDiv = document.getElementById('botones');
	for(var i=4; i>-1; i--){
		finEditando.innerHTML = datos[i];
		finEditando = finEditando.nextSibling;
	}
	cambiarEnEdicion(finEditando);
	enEdicion = true;
	nodoDiv.innerHTML = '';
}
function cambiarEnEdicion(nodo){
	if(enEdicion==true){
		nodo.textContent = 'En edición';
		nodo.style.color = 'green';
	}else{
		nodo.textContent = 'Editar';
		nodo.style.color = '#3300FF';
	}
}

Saludos....

pedro,, · « **Respuesta #1 en:** 05 de Marzo 2017, 11:51 »

Hola Pandemia.

Después de pulsar el botón editar una fila, solo da opción de editar dos de las columnas, si pulso sobre cancelar no pasa nada, cuando das en aceptar solo se envían los datos de dos columnas, y se tendrían que enviar los datos de la fila completa, esas partes son la que tienes que corregir.

Saludos.

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

Noticias:

Autor Tema: Ejemplo innerHTML JavaScript. Modificar campos de tabla dinámica: edita CU01139E (Leído 4932 veces)

Pandemia

Ejemplo innerHTML JavaScript. Modificar campos de tabla dinámica: edita CU01139E

pedro,,

Re:CU01139E Ejemplo innerHTML JavaScript. Modificar campos de tabla dinámica: edita

Preguntas y respuestas

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

Noticias:

Autor Tema: Ejemplo innerHTML JavaScript. Modificar campos de tabla dinámica: edita CU01139E (Leído 4932 veces)

Pandemia

Ejemplo innerHTML JavaScript. Modificar campos de tabla dinámica: edita CU01139E

pedro,,

Re:CU01139E Ejemplo innerHTML JavaScript. Modificar campos de tabla dinámica: edita

Preguntas y respuestas

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