Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » PHP » Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

PHP - Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Publicado por Marcos (5 intervenciones) el 05/09/2016 22:09:11
Que tal gente, necesito ayuda para lograr hacer lo representado en la siguiente imagen:


ejemplo1

Es un "botón" que permita modificar el nombre, descripción, precio, etc y otro botón que permita eliminarlo.
Si es necesario puedo dejar los códigos que estoy usando para este ejercicio.
Cualquier sugerencia es agradecida!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Publicado por que te importa (1 intervención) el 29/11/2019 17:25:51
Solo dire una cosa y es que no entiendo :c
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alpanpan
Val: 198
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Publicado por Alpanpan (94 intervenciones) el 10/09/2016 00:45:57
Si quieres que sea en la misma página, deberías usar javascript o un framework de javascript como jquery y usar ajax. Así suelo hacerlo yo.
Si te dá igual que sea en otra página, cada botón, metelo dentro de un formulario, que te dirija a una página en concreto pasando como parámetro la id del producto.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Alpanpan
Val: 198
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Publicado por Alpanpan (94 intervenciones) el 11/09/2016 14:16:21
Aquí tienes más o menos, el gódigo que suelo usar yo, pero que te sirva de algo
Solo decirte que yo suelo hacer que se graben las cosas según se modifican, campo a campo, no los registros completos.

La estructura de la tabla
1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE `menu` (
	`idMenu` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'width:30,ali:right',
	`androidID` VARCHAR(50) NULL DEFAULT '0' COMMENT 'width:100' COLLATE 'latin1_swedish_ci',
	`texto` VARCHAR(50) NULL DEFAULT '0' COMMENT 'width:200' COLLATE 'latin1_swedish_ci',
	`icono` VARCHAR(50) NULL DEFAULT NULL COMMENT 'tipo:ico,blanco:null' COLLATE 'latin1_swedish_ci',
	`padre` INT(11) NULL DEFAULT '0' COMMENT 'tipo:sel,valor:idMenu,texto:texto,where:padre=\'0\',blanco:0',
	`activo` CHAR(1) NULL DEFAULT '0' COMMENT 'tipo:bool' COLLATE 'latin1_swedish_ci',
	`orden` CHAR(2) NULL DEFAULT '0' COMMENT 'width:30, ali:right' COLLATE 'latin1_swedish_ci',
	UNIQUE INDEX `idMenu` (`idMenu`)
)
COLLATE='utf8_general_ci'
ENGINE=MyISAM
AUTO_INCREMENT=14;

Algún dato
1
2
3
4
5
6
7
8
9
10
11
12
13
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (1, 'nav_telefonos', 'Teléfonos de Interés', '@android:drawable/ic_menu_call.png', 0, '1', '1');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (2, 'nav_Fiestas', 'Fiestas', '@drawable/ic_menu_fiestas.png', 0, '1', '2');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (3, 'nav_Fiestas_Mayo', 'La Ascensión', '@drawable/ic_menu_fiestas.png', 2, '1', '3');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (4, 'nav_Fiestas_Agosto', 'La Virjen y San Roque', '@drawable/ic_menu_fiestas.png', 2, '1', '4');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (5, 'nav_Infra', 'Infraestructuras', '@drawable/ic_menu_ayto', 0, '1', '5');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (6, 'nav_Colec', 'Colectivos', '', 0, '1', '6');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (7, 'nav_Colec_AsocDep', 'Asociaciones Deportivas', '@drawable/ic_menu_deportivas.png', 6, '1', '7');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (8, 'nav_Fiestas_Penias', 'Peñas', '@drawable/ic_menu_penia.png', 2, '1', '8');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (9, 'nav_Infra_Educ', 'Educativas', '@drawable/ic_menu_educacion.png', 5, '1', '1');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (10, 'nav_Infra_Ayun', 'Ayuntamiento', '@drawable/ic_menu_ayto.png', 5, '1', '0');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (11, 'nav_Infra_Cult', 'Culturales', '@drawable/ic_menu_cultura.png', 5, '1', '2');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (12, 'nav_Infra_Depor', 'Deportivas', '@drawable/ic_menu_deporte.png', 5, '1', '3');
INSERT INTO `menu` (`idMenu`, `androidID`, `texto`, `icono`, `padre`, `activo`, `orden`) VALUES (13, 'nav_Infra_Soc', 'Sociales', '@drawable/ic_menu_social.png', 5, '1', '4');

El archivo index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/funciones.js"></script>
<title>Android</title>
<style>
	body { margin:0px } /* Configuramos la página */
	#vacia { display:none } /* Ocultamos la tabla con la fila vacía */

	.icono { height:24px } /* Definimos el alto de los iconos */
	td{ text-align:center; padding-left:2px; padding-right:2px; } /* Definimos el estilo de las celdas de la tabla */
	input{ padding-left:5px; padding-right:5px; border:solid 1px rgba(0,0,0,0.30); background-color:rgba(255,255,255,0.75) } /* Definimos las características de los campos de texto */
	tr:nth-child(odd) { background-color:rgba(225,222,222,1.00); border-spacing: 1px; border-collapse:collapse; } /* Definimos el estilo de las filas pares de la tabla */
	#datos { border:rgba(0,0,0,1.00) solid 1px; border-collapse:collapse; } /* Definimos el estilo de la tabla que contiene los datos */

	th{ background:rgba(0,0,0,1.00); color:white; text-align:center; padding-left:2px; padding-right:2px;   } /* Definimos el estilo de la cabecera de la tabla que contiene los datos */
</style>
</head>
<body>
<div id="ui">
	<!-- Esta tabla es la que contien la fila con los campos, pero sin datos -->
	<table id="vacia">
		<tbody>
			<!-- Esta es la fila que define los campos en los que presentar/introducir los datos, pero sin datos -->
			<!-- Será la que copiaremos para poder introducir nuevos registros -->
			<tr id="vacio">
				<td><input name="idMenu" value="" readonly style="width:30px;text-align:right;" type="text"></td>
				<td><input name="androidID" value="" style="width:100px;" type="text"></td>
				<td><input name="texto" value="" style="width:200px;" type="text"></td>
				<td><input name="activo" value="" style="" type="checkbox"></td>
				<td><input name="orden" value="" style="width:30px;text-align:right;" type="text"></td>
				<td><img class="mas icono" src="img/nuevo.png" title="Añadir otro Item"></td>
				<td><img class="borrar icono" src="img/papelera.png" title="Añadir otro Item"></td>
			</tr>
		</tbody>
	</table>
	<!-- Esta tabla presenta los datos de la base -->
	<table id="datos">
		<tbody>
			<tr>
				<th>#</th>

				<th>ID</th>
				<th>Texto</th>
				<th>Activo</th>
				<th>Orden</th>
				<th>&nbsp;</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td><input name="idMenu" value="2" readonly style="width:30px;text-align:right;" type="text"></td>
				<td><input name="androidID" value="nav_Fiestas" style="width:100px;" type="text"></td>
				<td><input name="texto" value="Fiestas" style="width:200px;" type="text"></td>
				<td><input checked="" name="activo" value="" style="" type="checkbox"></td>
				<td><input name="orden" value="2" style="width:30px;text-align:right;" type="text"></td>
				<td><img class="mas icono" src="img/nuevo.png"></td>
				<td><img class="borrar icono" src="img/papelera.png"></td>
			</tr>
			<tr>
				<td><input name="idMenu" value="3" readonly style="width:30px;text-align:right;" type="text"></td>
				<td><input name="androidID" value="nav_Fiestas_Mayo" style="width:100px;" type="text"></td>
				<td><input name="texto" value="La Ascensión" style="width:200px;" type="text"></td>
				<td><input checked="" name="activo" value="" style="" type="checkbox"></td>
				<td><input name="orden" value="3" style="width:30px;text-align:right;" type="text"></td>
				<td><img class="mas icono" src="img/nuevo.png"></td>
				<td><img class="borrar icono" src="img/papelera.png"></td>
			</tr>
			<tr>
				<td><input name="idMenu" value="4" readonly style="width:30px;text-align:right;" type="text"></td>
				<td><input name="androidID" value="nav_Fiestas_Agosto" style="width:100px;" type="text"></td>
				<td><input name="texto" value="La Virjen y San Roque" style="width:200px;" type="text"></td>
				<td><input checked="" name="activo" value="" style="" type="checkbox"></td>
				<td><input name="orden" value="4" style="width:30px;text-align:right;" type="text"></td>
				<td><img class="mas icono" src="img/nuevo.png"></td>
				<td><img class="borrar icono" src="img/papelera.png"></td>
			</tr>
			<tr>
				<td><input name="idMenu" value="8" readonly style="width:30px;text-align:right;" type="text"></td>
				<td><input name="androidID" value="nav_Fiestas_Penias" style="width:100px;" type="text"></td>
				<td><input name="texto" value="Peñas" style="width:200px;" type="text"></td>
				<td><input checked="" name="activo" value="" style="" type="checkbox"></td>
				<td><input name="orden" value="8" style="width:30px;text-align:right;" type="text"></td>
				<td><img class="mas icono" src="img/nuevo.png"></td>
				<td><img class="borrar icono" src="img/papelera.png"></td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>

El archivo funciones.js, encarggado de controlar los eventos y la llamada ajax para manipular los datos
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// JavaScript Document

$(document).ready(function(e) {
	// Cuando la página se carge completamente actualizamos los eventos para editar/añadir/borrar filas en la tabla Datos

	cargaEventos();
});
 
function cargaEventos()
{
	// Cuando se pulse el icono de borrar, eliminará la fila afectada

	$(".borrar").click(function(e) {
		// TODO: Poner el código para eliminar el registro indicado de la tabla

		$(this).parent("td").parent("tr").remove("tr");
	});
 
	// Cuando se pulse el icono de agregar fila...

	$(".mas").click(function(e) {
		// TODO: Comprobar que no existan más filas vacias

		// Clonamos la fila Vacía

		var nuevo=$("#vacio").clone(true);
		// Elinamos su id, para despues editarlo		

		$(nuevo).attr("id","");
		// Capturamos la posición de la fila donde hemos pulsado el icono de agregar

		var indice= $(this).parent("td").parent("tr").index();
		// Añadimos la nueva fila vacia después de la fila en que hemos pulsado

		$("#datos> tbody > tr").eq( indice ).after( nuevo );
	});
 
	// Cuando hagamos algún cambio en alguno de los campos...

	$("input").change(function(e) {
		// Buscamos en la fila donde se han editado los datos, el campo que contiene la ID (idMenu) del registro

		var id=$(this).parent().parent().find("input[name*='idMenu']");
		// Capturamos la ID del registro

		var laID=$(id).val();
		// Cogemos el nombre del campo editado

		var campo=$(this).attr("name");
		// Cogemos el nuevo valor

		var valor=$(this).val();
		// Cogemos el tipo del campo, para saber como ha de comportarse con los datos introducidos

		var tipo=$(this).prop("type");
 
		switch(tipo)
		{
			case "checkbox": // Si el campo es del tipo CHECKBOX, y está marcado, cambiamos el valor 1, si no lo está el valor será 0

				valor=($(this).prop("checked")) ? "1":"0";
				break;
		}
 
		// Llamamos al script (grabra.php) que se encargará de trabajar los datos en la Base de Datos, y pasamos como parámetros

		// idMenu: la id del registro

		// campo: el campo a modificar

		// valor: el valor a grabar		

		$.ajax
		({
			type: "POST",
			url: "grabar.php",
			async:false,
			data:
				{
				idMenu: laID,
				campo: campo,
				valor: valor
				}
		})
		.done(function( msg )
		{
			// Capturamos el valor devuelto por el script

			// Si el valor devuelto no es el texto "actualizado", quiere decir que el registro es nuevo, y por lo tanto el valor devuelto es la ID que le corresponde		

			if ( msg != "actualizado" )
			{
				// Mostramos la ID del nuevo registro

				$(id).val(msg);
			}
			return false;
		});
	});
};

El archivo grabar.php, trabaja con los datos pasados por AJAX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
// TODO: Crear código para eliminar el registro

 
// Los datos de conexión a la Base

$servidor= "localhost";
$puerto  = "3306";
$bd      = "vdc";
$usuario = "??????";
$contra  = "??????";
 
// Iniciamos la conexión

$conexion = new mysqli($servidor, $usuario, $contra, $bd);
if (mysqli_connect_errno())
{
	// La conexión, no se ha podido realizar

	die("No ha sido posible conectar con la base de datos");
}
 
// Comprobamos si se ha pasado una id

if ( $_REQUEST['idMenu'] != "") $item['idMenu'] = $_REQUEST['idMenu'];
// Capturamos los datos pasado en codificación utf8, mara que graba eñes y acentos

$item['campo'] = utf8_decode($_REQUEST['campo']);
$item['valor'] = utf8_decode($_REQUEST['valor']);
 
grabaItem( $item );
function grabaItem( $item )
{
	$nuevo=false;
	// Si se ha pasado una ID ...

	if ( isset($item['idMenu']) )
	{
		// quiere decir que el registro existe, y por lo tanto modificamos el valor del campo correspondiente

		$sql="UPDATE `vdc`.`menu` SET ".$item['campo']."='".$item['valor']."' WHERE idMenu='".$item['idMenu']."'";
	}
	else
	{
		// Si no existe, insertamos un nuevo registro

		$sql="INSERT INTO `vdc`.`menu` (".$item['campo'].") values ('".$item['valor']."')";
		$nuevo=true;
	}
	$resultado = $this->conexion->query($sql);
 
	// Si se ha insertado un nuevo registro, "devolvemos" la id asisnada

	if( $nuevo ) print_r (mysqli_insert_id($this->conexion) );
	// si no, devolvemos que el registro ha sido actualizado

	else print_r(  "actualizado" );
	return;
}
?>
Ya me contarás
P.D.:A ver si al quinto intendo, se manda
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
4
Comentar
sin imagen de perfil

Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Publicado por Marcos (5 intervenciones) el 12/09/2016 03:24:09
Mucha gracias! siguiendo el tuyo como ejemplo lo pude hacer sin problema.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alpanpan
Val: 198
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Publicado por Alpanpan (94 intervenciones) el 12/09/2016 10:17:31
Me alegro que te haya servido.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Boton de "Editar y Borrar" dentro de una tabla. PHP y MySQL

Publicado por DREMONCK (1 intervención) el 20/03/2020 15:53:03
TENDRAS DE CASUALIDAD LOS ARCHIVOS JS QUE USASTE EN ESTE EJERSICIO
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar