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.
Tema: JavaScript innerHTML tabla dinámica editar filas permitir cambios (CU01139E) (Leído 4528 veces)
RSS -
WAP2