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: JuansT en 26 de Enero 2017, 05:01
-
Solución planteada al ejercicio CU01139E del curso elemental de programación web con JavaScript.
El archivo del estilo está casi en su totalidad copiado del ejemplo ya que el body, th,tr,td no cambian y le añadí poca cosa.
el archivo html sí que lo hice sin ver el ejemplo y me salió diferente.
La "faena" está en el archivo functions.js, espero que os parezca bien.
functions.js
var editando = false, nombres = ["alimento","calorias","grasas","proteinas","carbohidratos"]; //variable es para tener guardado los nombres de las id's de los inputs, así lo manipulo en el for
function editar(nodo){
if(!editando){
editando=true;
var nodoPadre = nodo.parentNode, nuevoHTML = "";
for(var i=0;i<5;i++){ nuevoHTML = nuevoHTML + "<td>" + "<input type='text' name='" + nombres[i] + "' size='10' value='" + nodoPadre.childNodes[i].firstChild.nodeValue + "' ></td>"}
nuevoHTML = nuevoHTML + "<td>En edición</td>";
nodoPadre.innerHTML = nuevoHTML;
nodoPadre.id = "modificado";
document.getElementById('botones').style.display = "inline";
}else{alert("Solo se puede editar una línea. Recargue la página para poder editar otra");}
}
function enviarForm(){
var crearForm = "<form id='formulario' action='https://www.aprenderaprogramar.es' method='get'>"
var nodoModificado = document.getElementById('modificado');
var nodoBotones = document.getElementById('botones');
for(var i=0;i<5;i++){
crearForm = crearForm + "<input type='text' name='" + nombres[i] + "' value='" + nodoModificado.childNodes[i].firstChild.value + "' >";
}
nodoBotones.innerHTML = crearForm;
document.getElementById('formulario').submit();
}
html
<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" >
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<table>
<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="editar(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="editar(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="editar(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="editar(this)">Editar</td></tr>
</table>
<div id="botones">
<p>Pulse Aceptar para guardar los cambios o Cancelar para anularlos</p>
<button class="boton" type="button" onclick="enviarForm()">Aceptar</button><button class="boton" type="button" onclick="location.reload()">Cancelar</button>
</div>
</body>
</html>
styles.css
body {font-family: Arial, Helvetica, sans-serif; background-color: #FFF8DC;}
#botones {
display:none;
}
#formulario{
display:none;
}
table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 45px; width: 550px;
text-align: center; border-collapse: collapse; }
th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff; color: #039; }
td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; }
tr:hover td { background: #d0dafd; color: #339; }
.boton {color: black; padding: 5px; margin: 10px;
background-color: #b9c9fe;
font-weight: bold; }
.editar {color: blue; cursor:pointer;}
-
Hola JuansT.
El ejercicio es correcto.
Solo comentarte una cosa, cuando crees las variables intenta no colocarlas en la misma línea, es decir, normalmente si vas a declarar más de una variable en la misma línea, intenta que sean del mismo tipo (boolean, String, Number, etc).
Saludos. ;D
-
Entendido, muchas gracias!
-
Yo te pediría una cosa JuansT, para facilitar ver tu código sería mucho más rápido para todos si pones el código HTML, CSS y el JS en un mismo archivo.
Saludos
-
Lo iba a hacer pero este ejercicio nos recomendaba hacerlo en 3 archivos distintos aparte que otro usuario puso este ejercicio también en diferentes archivos y por eso decidí hacerlo así, pero para la próxima lo hago junto no hay problema.