1

Tengo una tabla que hace una consulta en Mysql, lo que necesito es que al dar click en una fila, me tome el valor de una celda en en especifico en este caso ID, para que a través de una variable poder manipular los datos en otra página PHP.

Esta es la tabla que hace la consulta:

<?php 
$conect=mysqli_connect('localhost','root','','prueba');

 ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<br>
	<div class="container col-sm-5 col-sm-offset-3">
		<table class="table table-bordered table-hover">
			<thead>
				<tr class="success" align="center">
					<td><strong>ID</strong></td>
					<td><strong>NOMBRE</strong></td>
					<td><strong>APELLIDOS</strong></td>
					<td><strong>GRADO</strong></td>
					<td><strong>TELEFONO</strong></td>
				</tr>
			</thead>
			<tbody>
			<?php
			$sql= "SELECT * FROM usuario";
			$result=mysqli_query($conect, $sql);
			while ($mostrar=mysqli_fetch_array($result)) {
				?>
					<tr id="fila">
					<td  id="valor"><?php echo $mostrar['id']?></td>
					<td><?php echo $mostrar['nombres']?></td>
					<td><?php echo $mostrar['apellidos']?></td>
					<td><?php echo $mostrar['grado']?></td>
					<td><?php echo $mostrar['telefono']?></td>
				</tr>
				<?php 
			}
			 ?>
			

			</tbody>
		</table>
		</div>

</body>
</html>

y esta es la otra página donde voy a desplegar el resultado, donde que quiero hacer la consulta a través del ID tomado de la tabla anterior:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<title>Perfil del Usuario</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<br><br><br>
<div class="row">
	<div class="container col-sm-4 col-sm-offset-4">
	<div class="panel panel-primary">
	<div class="panel-heading" style="text-align: center"><strong>Perfil General del Usuario</strong> </div>
	<div class="panel-body">
		<table class="table table-hover table-condensed table-bordered">
		<tr>
		<th class="success col-sm-3">ID</th>
		<td></td>
	</tr>
	<tr>
		<th class="success col-sm-3">NOMBRES</th>
		<td></td>
	</tr>
	<tr>
		<th class="success col-sm-3">APELLIDOS</th>
		<td></td>
	</tr>
	<tr>
		<th class="success col-sm-3">GRADO</th>
		<td></td>
	</tr>
	<tr>
		<th class="success col-sm-3">TELEFONO</th>
		<td></td>
	</tr>

	</table>
	</div>
		
	</div>
	
</div>
</div>
</body>
</html>

1 respuesta 1

1

En la parte del HTML tienes que pasar también el valor del id al elemento:

<td  id="<?php echo $mostrar['id']?>"><?php echo $mostrar['id']?></td>

Después con un simple on click puedes extraer el valor.

Te dejo algunos ejemplos:

En jQuery:

$(function(){

  $('table').on('click', 'td', function(){ 
  
      console.log( 'Valor: ' + $(this).prop('id') );
  });
});
td{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td id="valor1">PHP</td>
<td id="valor2">JS</td>
<td id="valor3">CSS</td>
</table>

En Vanilla JS:

let td = document.querySelectorAll('td');

for (var i = 0; i < td.length; i++) {

    td[i].addEventListener('click', function(event) {    
       console.log( 'Valor: ' + this.id );
    });
}
td{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td id="valor1">PHP</td>
<td id="valor2">JS</td>
<td id="valor3">CSS</td>
</table>

En Vanilla JS ES6:

let td = document.querySelectorAll('td');

Array.from(td).forEach( td => {

    td.addEventListener('click', function() {
    
        console.log( 'Valor: ' + this.id );
    });
});
td{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td id="valor1">PHP</td>
<td id="valor2">JS</td>
<td id="valor3">CSS</td>
</table>

5
  • Saludos. gracias por responder, pero como paso ahora la variable a php para poder hacer la consulta (''SELECT * FROM usuario WHERE id=$variable_js"); Commented el 30 ago. 2017 a las 4:39
  • @MartinMatias - Aquí tienes algunos ejemplos... Saludos Commented el 30 ago. 2017 a las 5:41
  • Aldanux el link esta roto. Saludos.. Commented el 31 ago. 2017 a las 0:23
  • @MartinMatias - A ver si este enlace funciona... saludos Commented el 31 ago. 2017 a las 7:25
  • He visto muchos comentarios y ejemplo pero me ha traido mas confusion, pido disculpa por tanta pregunta pero, hasta ahora he logrado obtener el valor de una celda al clickear una fila, lo que no he podido crear es una variable y pasarla a otro documento php para manipularla. Commented el 31 ago. 2017 a las 20:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.