Autor Tema: JavaScript Modificar campos tabla editar fila ejemplo código innerHTML CU01139E# (Leído 10690 veces)

pedro,, · « **en:** 12 de Octubre 2015, 17:46 »

Hola, dejo mi ejercicio CU01139E del tutorial de programación web con JavaScript resuelto, decir que resolví el ejercicio sin querer ver la solución propuesta en el tema, y lo que no me dí cuenta es que había unas sugerencias a seguir antes de dicha resolución, así que lo resolví de esta manera...

Citar

Una página web carga una tabla con datos relativos al contenido nutricional de los alimentos como se muestra a continuación:

Contenido nutricional por cada 100 g de alimento.
]Alimento   Calorías (kCal)   Grasas (g)   Proteína (g)   Carbohidratos (g)   Acciones
Arándano   49   0.2   0.4   12.7   Editar
Plátano   90   0.3   1.0   23.5   Editar
Cereza   46   0.4   0.9   10.9   Editar
Fresa   37   0.5   0.8   8.3   Editar
Se desea que al pulsar en el texto Editar de la columna Acciones, ocurra lo siguiente:
a) El texto de esa columna que ponía <<Editar>> en color azul, será reemplazado por el texto <<En edición>> en color gris o negro.
b) Los datos en la fila correspondiente se convertirán en casillas de texto editables de modo que el usuario pueda modificar los datos de esa fila.
c) Debe aparecer en la parte inferior de la tabla el texto: <<Pulse Aceptar para guardar los cambios o cancelar para anularlos>> y dos botones: Aceptar y Cancelar, que podrán ser pulsados por el usuario para Aceptar los cambios o para cancelar.
Si el usuario pulsa en el botón Aceptar los datos de la fila en edición deben ser enviados a una url de destino por el método get. Por ejemplo si la url de destino es aprenderaprogramar.com y editáramos la fila correspondiente a Fresa y pulsamos aceptar, el navegador debe enviarnos a una url como esta:
http://aprenderaprogramar.com/?alimento=Fresa&calorias=57&grasas=1.5&proteina=0.4&carbohidratos=12.8
Atención: los datos que se deben enviar a la url de destino son los datos editados por el usuario, no los datos originales de la tabla.
Si el usuario pulsa en Cancelar se recargará la tabla original (de forma que no habrá ninguna fila en edición).
Si estando seleccionada una fila en edición el usuario pulsa sobre Editar en otra fila, se mostrará un mensaje indicando lo siguiente: “Solo se puede editar una línea. Recargue la página para poder editar otra”.

El HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Ejercicio_CU01139E.css">
		<script type="text/javascript" src="Ejercicio_CU01139E.js"></script>
	</head>
	<body>
		<div id="tabla1">
		<form action="https://www.aprenderaprogramar.com" method="get">
			<table>
				<caption>Contenido nutricional por cada 100g de alimento.</caption>
				<tr>
					<th>Alimento</th><th>Calorias<br/>(kCal)</th><th>Grasas<br/>(g)</th><th>Proteina<br/>(g)</th><th>Carbohidratos<br/>(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(1)">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(2)">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(3)">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(4)">Editar</td>
				</tr>
			</table><br/>
			<div id="botonesForm"></div>
		</form>
		</div>
	</body>
</html>

El archivo CSS:

Código: [Seleccionar]

/* Curso CSS estilos aprenderaprogramar.com*/

body {font-family: Arial, Helvetica, sans-serif;}
#tabla1{background-color: #FFFF99; padding: 11px; margin: 45px auto; width: 750px;} 
table { width: 700px; text-align: center; border-collapse: collapse; margin: 0 auto; color: #0066FF;} 
th {background-color: #0099FF; border-bottom: 1px solid white; color: #3300FF; } 
td {padding: 11px; background-color: #00FFFF; border-bottom: 1px solid white; color: #3300FF; border-top: 1px solid white; } 
tr:hover td { background-color: #3300FF; color: #00FFFF; }
.botonForm{margin: 11px 22px; background-color: #3300FF; color: #00FFFF;}
.editar{color: #3300FF; cursor: pointer;}
#texto1{margin: 0 22px;}

El archivo js:

Código: [Seleccionar]

var datos = new Array();
var nodoTd = document.getElementsByTagName('td');
var numFila;
var enEdicion = true;
function creaCajasTexto(inicio, fin){
	var nameForm = ['alimento', 'calorias', 'grasas', 'proteina', 'carbohidratos'];
	var instruccion = new Array();
	for(var i=inicio; i<fin; i++){
			datos[i-inicio] = nodoTd[i].textContent;
			instruccion[i-inicio] = '<input type=\'text\' style=\'width:70px\' name=\'' + nameForm[i-inicio] + '\' value=\'' + datos[i-inicio] + '\'>';
			nodoTd[i].innerHTML = instruccion[i-inicio];
		}
		cambiarEnEdicion(fin);
}
function editarFila(numeroFila){
	if(numeroFila==1 && enEdicion==true){creaCajasTexto(0, 5);}
	if(numeroFila==2 && enEdicion==true){creaCajasTexto(6, 11);}
	if(numeroFila==3 && enEdicion==true){creaCajasTexto(12, 17);}
	if(numeroFila==4 && enEdicion==true){creaCajasTexto(18, 23);}	
	if (enEdicion==true){
		var nodoDiv = document.getElementById('botonesForm');
		nodoDiv.innerHTML = '<span id=\'texto1\'>Pulse Aceptar para guardar los cambios o cancelar para anularlos.</span><br/>' + 
			'<input type=\'submit\' value=\'Aceptar\' class=\'botonForm\'><input type=\'reset\' value=\'Cancelar\' class=\'botonForm\' onclick=\'reiniciarFila()\'>';
		numFila = numeroFila;
		enEdicion = false;
	}else{
		alert('Solo se puede editar una línea. Recargue la página para poder editar.')
	}
}
function reiniciarFila(){
	var inicio; var fin;
	var nodoDiv = document.getElementById('botonesForm');
	if(numFila==1){inicio=0; fin=5;}
	if(numFila==2){inicio=6; fin=11;}
	if(numFila==3){inicio=12; fin=17;}
	if(numFila==4){inicio=18; fin=23;}
	var instruccion = new Array();
	for(var i=inicio; i<fin; i++){
		instruccion[i-inicio] = datos[i-inicio];
		nodoTd[i].innerHTML = instruccion[i-inicio];
	}
	cambiarEnEdicion(fin);
	enEdicion = true;
	nodoDiv.innerHTML = '';
}
function cambiarEnEdicion(numEdicion){
	if(enEdicion==true){
		nodoTd[numEdicion].textContent = 'En edición';
		nodoTd[numEdicion].style.color = 'gray';
	}else{
		nodoTd[numEdicion].textContent = 'Editar';
		nodoTd[numEdicion].style.color = '#3300FF';
	}
}

Saludos.

Mario R. Rancel · « **Respuesta #1 en:** 14 de Octubre 2015, 10:42 »

Buenos días Pedro, tras revisar tu ejercicio puedo decir que creo que se adapta perfectamente a lo que se pretendía:

Citar

Intenta resolver el ejercicio con los conocimientos adquiridos a lo largo del curso y realizando alguna consulta adicional en internet. Es bueno intentar enfrentarse a los problemas por uno mismo y tratar de resolverlos por uno mismo, ya que favorece el aprendizaje como programadores. Ten en cuenta que este ejercicio posiblemente no tenga una solución única, sino que hay distintas formas de plantearlo y distintas formas de resolverlo. Intenta crear tu propia solución y después compárala con la que indicaremos nosotros tratando de ver las ventajas e inconvenientes de una y otra forma de resolver el problema.

En tu caso para el envío de datos has definido un formulario que envuelve a la tabla, y cuando se realiza la edición añades el código del campo del formulario a enviar.

En la propuesta incluida dentro del curso se dejaba un div vacío con id <div id="contenedorForm"> al que se añadía el contenido del formulario una vez se realizaba la edición.

Hay otras diferencias pero en general tu solución es buena y simple y en algunos aspectos creo que incluso mejora a la propuesta dentro del curso.

Hay un detalle que a primera vista me parece mejor en la solución del curso que en la tuya, que es qué se pasa como argumentos a la función cuando se pulsa el botón editar. En tu caso tenemos por ejemplo onclick="editarFila(2)" y en la solución del curso onclick="transformarEnEditable(this)"

¿Por qué comento esto? Al indicar editarFila(2) estás ligando el número 2 a esta edición, pero supón que otra persona hace un cambio en el orden de los alimentos y pone la cereza antes que el plátano. En ese caso cuando pulsemos en editar en la fila de la cereza nos editaría la fila del plátano, porque la llamada no está ligada a la fila sino a un número fijo. Cuanto menos referencias "fijas" y más "genéricas" tengamos más robusto será el código frente a cambios.

Este ejercicio puedes darlo por más que bueno.

Saludos

pedro,, · « **Respuesta #2 en:** 14 de Octubre 2015, 23:05 »

Hola Mario.

Lo primero darte las gracias por tu tiempo.

Y ya que comentas sobre las referencias genéricas hice algunos cambios en el código, espero haberte entendido bien.

el código CSS es el mismo y el HTML le hice algún cambio sobre lo que comentaste, quedando así:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Ejercicio_CU01139E.css">
		<script type="text/javascript" src="Ejercicio_CU01139E3.js"></script>
	</head>
	<body>
		<div id="tabla1">
		<form action="https://www.aprenderaprogramar.com" method="get">
			<table>
				<caption>Contenido nutricional por cada 100g de alimento.</caption>
				<tr>
					<th>Alimento</th><th>Calorias<br/>(kCal)</th><th>Grasas<br/>(g)</th><th>Proteina<br/>(g)</th><th>Carbohidratos<br/>(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><br/>
			<div id="botonesForm"></div>
		</form>
		</div>
	</body>
</html>

y el código JS ahora quedaría de la siguiente forma:

Código: [Seleccionar]

var datos = new Array();
var enEdicion = true;
var ultimoNodoEditado;
function editarFila(nodo){
	var nodoTd = nodo.previousSibling;
	if (enEdicion==true){
		cambiarEnEdicion(nodo);
		creaCajasTexto(nodoTd);
		var nodoDiv = document.getElementById('botonesForm');
		nodoDiv.innerHTML = '<span id=\'texto1\'>Pulse Aceptar para guardar los cambios o cancelar para anularlos.</span><br/>' + 
			'<input type=\'submit\' value=\'Aceptar\' class=\'botonForm\'><input type=\'reset\' value=\'Cancelar\' class=\'botonForm\' onclick=\'reiniciarFila()\'>';
		enEdicion = false;
	}else{
		alert('Solo se puede editar una línea. Recargue la página para poder editar.')
	}
}
function creaCajasTexto(nodoTd){
	var nameForm = ['alimento', 'calorias', 'grasas', 'proteina', 'carbohidratos'];
	var instruccion = new Array();
	for(var i=0; i<5; i++){
		datos[i] = nodoTd.textContent;
		instruccion = '<input type=\'text\' style=\'width:70px\' name=\'' + nameForm[i] + '\' value=\'' + nodoTd.textContent + '\'>';
		nodoTd.innerHTML = instruccion;
		if(i<4){nodoTd = nodoTd.previousSibling;}
	}
	ultimoNodoEditado = nodoTd;
}
function reiniciarFila(){
	var nodoDiv = document.getElementById('botonesForm');
	for(var i=4; i>-1; i--){
		ultimoNodoEditado.innerHTML = datos[i];
		ultimoNodoEditado = ultimoNodoEditado.nextSibling;
	}
	cambiarEnEdicion(ultimoNodoEditado);
	enEdicion = true;
	nodoDiv.innerHTML = '';
}
function cambiarEnEdicion(nodo){
	if(enEdicion==true){
		nodo.textContent = 'En edición';
		nodo.style.color = 'gray';
	}else{
		nodo.textContent = 'Editar';
		nodo.style.color = '#3300FF';
	}
}

Saludos.

Mario R. Rancel · « **Respuesta #3 en:** 15 de Octubre 2015, 08:31 »

Hola Pedro, sí que me has entendido bien. Cuantas menos referencias a números concretos tengas mejor, de esa forma el código trabaja "en función de lo que exista en un momento dado" y no de un número concreto. En tu anterior código si alterabas el orden de una fila (por ejemplo en lugar de arándano-cereza-plátano-fresa ponías arándano-plátano-cereza-fresa) ya no funcionaba bien. En cambio con el código actual ya funciona bien. Dejo todo el código unido en un solo archivo para quien quiera probarlo con la última versión que has hecho:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
		<style type="text/css">
/* Curso CSS estilos aprenderaprogramar.com*/

body {font-family: Arial, Helvetica, sans-serif;}
#tabla1{background-color: #FFFF99; padding: 11px; margin: 45px auto; width: 750px;}
table { width: 700px; text-align: center; border-collapse: collapse; margin: 0 auto; color: #0066FF;}
th {background-color: #0099FF; border-bottom: 1px solid white; color: #3300FF; }
td {padding: 11px; background-color: #00FFFF; border-bottom: 1px solid white; color: #3300FF; border-top: 1px solid white; }
tr:hover td { background-color: #3300FF; color: #00FFFF; }
.botonForm{margin: 11px 22px; background-color: #3300FF; color: #00FFFF;}
.editar{color: #3300FF; cursor: pointer;}
#texto1{margin: 0 22px;}

		</style>
		<script type="text/javascript">
var datos = new Array();
var enEdicion = true;
var ultimoNodoEditado;
function editarFila(nodo){
	var nodoTd = nodo.previousSibling;
	if (enEdicion==true){
		cambiarEnEdicion(nodo);
		creaCajasTexto(nodoTd);
		var nodoDiv = document.getElementById('botonesForm');
		nodoDiv.innerHTML = '<span id=\'texto1\'>Pulse Aceptar para guardar los cambios o cancelar para anularlos.</span><br/>' +
			'<input type=\'submit\' value=\'Aceptar\' class=\'botonForm\'><input type=\'reset\' value=\'Cancelar\' class=\'botonForm\' onclick=\'reiniciarFila()\'>';
		enEdicion = false;
	}else{
		alert('Solo se puede editar una línea. Recargue la página para poder editar.')
	}
}
function creaCajasTexto(nodoTd){
	var nameForm = ['alimento', 'calorias', 'grasas', 'proteina', 'carbohidratos'];
	var instruccion = new Array();
	for(var i=0; i<5; i++){
		datos[i] = nodoTd.textContent;
		instruccion = '<input type=\'text\' style=\'width:70px\' name=\'' + nameForm[i] + '\' value=\'' + nodoTd.textContent + '\'>';
		nodoTd.innerHTML = instruccion;
		if(i<4){nodoTd = nodoTd.previousSibling;}
	}
	ultimoNodoEditado = nodoTd;
}
function reiniciarFila(){
	var nodoDiv = document.getElementById('botonesForm');
	for(var i=4; i>-1; i--){
		ultimoNodoEditado.innerHTML = datos[i];
		ultimoNodoEditado = ultimoNodoEditado.nextSibling;
	}
	cambiarEnEdicion(ultimoNodoEditado);
	enEdicion = true;
	nodoDiv.innerHTML = '';
}
function cambiarEnEdicion(nodo){
	if(enEdicion==true){
		nodo.textContent = 'En edición';
		nodo.style.color = 'gray';
	}else{
		nodo.textContent = 'Editar';
		nodo.style.color = '#3300FF';
	}
}
		</script>
	</head>
	<body>
		<div id="tabla1">
		<form action="https://www.aprenderaprogramar.com" method="get">
			<table>
				<caption>Contenido nutricional por cada 100g de alimento.</caption>
				<tr>
					<th>Alimento</th><th>Calorias<br/>(kCal)</th><th>Grasas<br/>(g)</th><th>Proteina<br/>(g)</th><th>Carbohidratos<br/>(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><br/>
			<div id="botonesForm"></div>
		</form>
		</div>
	</body>
</html>

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript Modificar campos tabla editar fila ejemplo código innerHTML CU01139E# (Leído 10690 veces)

pedro,,

JavaScript Modificar campos tabla editar fila ejemplo código innerHTML CU01139E#

Mario R. Rancel

Re:JavaScript Modificar campos de tabla dinámica: editar filas. Ejercicio CU01139E

pedro,,

Re:JavaScript Modificar campos tabla editar filas ejemplo innerHTML CU01139E

Mario R. Rancel

Re:JavaScript Modificar campos tabla editar filas ejemplo innerHTML CU01139E

Preguntas y respuestas