Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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
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
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.... :)
-
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. ;D