Mostrar Mensajes
1761
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Boton Para Modificar Columna y Fila en mysql_query ?¿
« en: 22 de Mayo 2014, 22:53 »
Este podría ser un replantemiento: al pulsar sobre "editar" que las casillas se conviertan en editables. Una vez se quisieran guardar los cambios habría que pulsar en "Guardar cambios". Esto está hecho por javascript porque creo es lo que le da más agilidad.
Otra opción sería que todo saliera directamente en modo editable (como la última fila de la tabla que pongo como ejemplo) y que no exista el botón editar, sino directamente sólo "Guardar cambios"
De cualquier forma lo que deberías crear es un formulario que envíe los datos de forma que puedas operar sobre la base de datos con esos datos que te llegan cuando pulsas "Guardar cambios"
Otra opción sería que todo saliera directamente en modo editable (como la última fila de la tabla que pongo como ejemplo) y que no exista el botón editar, sino directamente sólo "Guardar cambios"
De cualquier forma lo que deberías crear es un formulario que envíe los datos de forma que puedas operar sobre la base de datos con esos datos que te llegan cuando pulsas "Guardar cambios"
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
table td {padding: 5px; text-align: center; }
p.simulaLink {color: blue; cursor:pointer;}
</style>
<script type="text/javascript">
function transformarEnEditable(nodo) {
var nodoContent = nodo.querySelectorAll("p");
var idInicial = nodoContent[0].firstChild.nodeValue;
var tituloInicial = nodoContent[1].firstChild.nodeValue;
var textoInicial = nodoContent[2].firstChild.nodeValue;
var catInicial = nodoContent[3].firstChild.nodeValue;
var fechaInicial = nodoContent[4].firstChild.nodeValue;
var rutaImgInicial = nodoContent[5].firstChild.nodeValue;
var nuevoCodigo = '<tr>'+
'<td > <input type="text" name="id" id="id" value="'+idInicial+'" size="10"></td>'+
'<td > <input type="text" name="titulo" id="titulo" value="'+tituloInicial+'" size="10"></td>'+
'<td > <input type="text" name="texto" id="texto" value="'+textoInicial+'" size="20"></td>'+
'<td > <input type="text" name="categoria" id="categoria" value="'+catInicial+'" size="10"></td>'+
'<td > <input type="text" name="fecha" id="fecha" value="'+fechaInicial+'" size="10"></td>'+
'<td > <input type="text" name="imagen" id="imagen" value="'+rutaImgInicial+'" size="10"></td>'+
'<td ><p class="simulaLink">Guardar cambios</p>'+
'<p>Borrar</p></td>'+
'</tr>';
nodo.innerHTML = nuevoCodigo;
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Consulta de noticias</h1>
<h2>Mostrando noticias</h2>
</div>
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><b>Id</b></p></td>
<td><p><b>Título</b></p></td>
<td><p><b>Texto</b></p></td>
<td><p><b>Categoría</b></p></td>
<td><p><b>Fecha</b></p></td>
<td><p><b>Imagen</b></p></td>
<td> </td>
</tr>
<tr>
<td><p>1</p></td>
<td><p>COBO</p></td>
<td><p>Su nuevo disco</p></td>
<td><p>Música</p></td>
<td><p>30/09/2011</p></td>
<td><p>Cobo.jpg</p></td>
<td><p class = "simulaLink" onclick="transformarEnEditable(this.parentNode.parentNode)">Editar</p>
<p>Borrar</p></td>
</tr>
<tr>
<td><p>2</p></td>
<td><p>Paintball</p></td>
<td><p>Adrenalina sin límites</p></td>
<td><p>Deportes</p></td>
<td><p>29/09/2011</p></td>
<td><p>Paintball.png</p></td>
<td><p>Editar</p>
<p>Borrar</p></td>
</tr>
<tr>
<td><p>3</p></td>
<td><p>Alejandra</p></td>
<td><p>Más descarada que nunca</p></td>
<td><p>Personaje</p></td>
<td><p>28/09/2011</p></td>
<td><p>Alejandra.jpg</p></td>
<td><p>Editar</p>
<p>Borrar</p></td>
</tr>
<tr>
<td > <input type="text" name="id" id="id" value="4" size="10"></td>
<td > <input type="text" name="titulo" id="titulo" value="america" size="10"></td>
<td > <input type="text" name="texto" id="texto" value="la prueba del delito" size="20"></td>
<td > <input type="text" name="categoria" id="categoria" value="Música" size="10"></td>
<td > <input type="text" name="fecha" id="fecha" value="30/08/2007" size="10"></td>
<td > <input type="text" name="imagen" id="imagen" value="carro.jpg" size="10"></td>
<td ><p class="simulaLink">Guardar cambios</p>
<p>Borrar</p></td>
</tr>
</tbody>
</table>
</body>
</html>
RSS