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: jbodenser en 13 de Marzo 2016, 22:11
-
Hola, acabo de terminar el ejercicio, he de decir que me ha costado bastante ya que no tenia mucha idea de como hacerlo, aunque es la primera vez que uso "this". Bueno aunque vi el ejercicio resuelto, seguí la linea de lo que ya había hecho y eso es lo que salió.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio tabla editable</title>
<link rel="stylesheet" href="css/editar-tabla-estilos.css">
<script src="js/funciones.js"></script>
</head>
<body>
<section>
<table id="tabla">
<tr>
<th>Alimento</th>
<th>Calorias (kCal)</th>
<th>Grasas (g)</th>
<th>Proteínas (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><span onclick="transformEditar(this)">Editar</span></td>
</tr>
<tr>
<td>Plátano</td>
<td>90</td>
<td>0.3</td>
<td>1.0</td>
<td>23.5</td>
<td><span onclick="transformEditar(this)">Editar</span></td>
</tr>
<tr>
<td>Ceréza</td>
<td>46</td>
<td>0.4</td>
<td>0.9</td>
<td>10.9</td>
<td><span onclick="transformEditar(this)">Editar</span></td>
</tr>
<tr>
<td>Fresa</td>
<td>37</td>
<td>0.5</td>
<td>0.8</td>
<td>8.3</td>
<td><span onclick="transformEditar(this)">Editar</span></td>
</tr>
</table>
<form action="#" name="formulario1" id="formulario1" method="get" onreset="anular()">
<div class="botones">
<p>Pulse Aceptar para guardar los cambios o cancelar para anularlos</p>
<input type="button" onclick="enviarForm()" class="btn-aceptar" value="Aceptar">
<input type="reset" class="btn-cancelar" value="Cancelar">
</div>
</form>
<div id="hidden-form">
</div>
</section>
</body>
</html>
section {
width: 750px;
overflow-x: auto;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
text-align: left;
}
#tabla th {
background: #1E90FF;
color: #fff;
padding-top: 11px;
padding-bottom: 11px;
}
th, td {
padding: 8px;
border: 1px solid #aaaaaa;
}
span {
color:#337ab7;
cursor: default;
}
.en-edicion {
color: #e61717;
}
.btn-aceptar, .btn-cancelar {
padding: 8px;
border-radius: 3px;
cursor: pointer;
transition: all ease 1s;
}
.btn-aceptar {
background: #1E90FF;
border: 1px solid #1777d4;
color: #FFFFFF;
}
.btn-cancelar {
background: #cccccc;
border: 1px solid #b4b4b4;
color: #000000;
}
.btn-aceptar:hover {
background: #286090;
}
.btn-cancelar:hover {
background: #b7b4b4;
}
.botones {
text-align: right;
margin-top: 8px;
margin-right: 8px;
display: none;
}var editando = false;
function transformEditar(nodo) {
if (editando == true) {alert('Solo se puede editar una línea. Pulse Cancelar para poder editar otra');}
else {
var tr = nodo.parentNode.parentNode;
var valPorDef = tr.querySelectorAll('td');
tr.innerHTML = '<td><input type="text" name="alimento" id="alimento" size="6" value="' + valPorDef[0].textContent + '"></td><td><input type="text" name="calorias" id="calorias" size="5" value="' + valPorDef[1].textContent + '"></td><td><input type="text" name="grasas" id="grasas" size="5" value="' + valPorDef[2].textContent + '"></td> <td><input type="text" name="proteinas" id="proteinas" size="5" value="' + valPorDef[3].textContent + '"></td><td><input type="text" name="carbohidratos" id="carbohidratos" size="5" value="' + valPorDef[4].textContent + '"></td><td><span class="en-edicion">En edición</span></td>';
document.querySelector('.botones').style.display = 'block';
editando = true;
}
}
function anular () {
window.location.reload();
}
function enviarForm () {
document.querySelector('#hidden-form').innerHTML =
'<input type="hidden" form="formulario1" name="alimento" value="'+document.querySelector('#alimento').value+'">'+
'<input type="hidden" form="formulario1" name="calorias" value="'+document.querySelector('#calorias').value+'">'+
'<input type="hidden" form="formulario1" name="grasas" value="'+document.querySelector('#grasas').value+'">'+
'<input type="hidden" form="formulario1" name="proteinas" value="'+document.querySelector('#proteinas').value+'">'+
'<input type="hidden" form="formulario1" name="carbohidratos" value="'+document.querySelector('#carbohidratos').value+'">';
document.getElementById('formulario1').submit();
}
Me pareció que no era necesario crear una variable para cada nombre del valor asi que me "ahorré" esas lineas de código.
var alimento = nodosEnTr[0].textContent; var calorias = nodosEnTr[1].textContent;
var grasas = nodosEnTr[2].textContent; var proteina = nodosEnTr[3].textContent;
var carbohidratos = nodosEnTr[4].textContent; var opciones = nodosEnTr[5].textContent;
No quise usar onsubmit(); porque me da la sensación de que le estamos instruyendo que envie el formulario 2 veces, una con el boton y otra con la funcion javascript, no se lo que influye en la realidad.
un saludo.
-
Hola! Lo veo todo bien, cada persona debe plantear el código que le resulte más adecuado siempre que sea un código y un diseño correcto.
A pesar de estar bien hay algo raro. Si pulso editar en la primera fila, introduzco como valor de grasas 2 y pulso aceptar ni se guarda el cambio ni se aprecia el envío de formulario.
Realmente sí hay envío pero como has escrito
<form action="#"
parece que hubiera un error porque estamos esperando que ocurra algo pero no ocurre.
Escribiendo <form action="https://aprenderaprogramar.com" al haber una página de destino ya se hace más claro que se envía el formulario.
Saludos!
-
Ahh vale. Genial! Eso no lo había probado, pensaba que daría igual que pusiera # o cualquier dirección.
Un saludo.