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;}
Tema: Javascript document.getElementById editar nodos del DOM modificarlos CU01139E (Leído 2667 veces)
RSS -
WAP2