Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Detectar fila al hacer click en el boton para coger id de registro

Estas en el tema de Detectar fila al hacer click en el boton para coger id de registro en el foro de Javascript en Foros del Web. Hola a todos, programo en PHP, pero soy muy novato en javascript, y necesito hacer mas "userfriendly" mi web. El caso es que necesito capturar ...
  #1 (permalink)  
Antiguo 15/11/2021, 11:21
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 12 años, 3 meses
Puntos: 10
Detectar fila al hacer click en el boton para coger id de registro

Hola a todos, programo en PHP, pero soy muy novato en javascript, y necesito hacer mas "userfriendly" mi web. El caso es que necesito capturar el id de un registro de una tabla. Algo tan sencillo como eso,... pero llevo toda la tarde y estoy un poco ya desesperado.
Pongo el html:
Código:
<table class="table table-striped table-responsive" id="resultado">
  <thead class="thead-dark">
    <tr>                
      <th scope="col" style="width:50px">id</th>
      <th scope="col" style="width:150px">Persona</th>
      <th scope="col">Acciones</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class=""><input type="text" value="1" class="id"></td>
      <td class=""><input type="text" value="Alberto" class="nombre"></td>
      <td>
        <button>CogerId</button>
      </td>
    </tr>
    <tr>
      <td class=""><input type="text" value="2" class="id"></td>
      <td class=""><input type="text" value="Javier" class="nombre"></td>
      <td>
        <button>CogerId</button>
      </td>
    </tr>
     <tr>
      <td class=""><input type="text" value="3" class="id"></td>
      <td class=""><input type="text" value="Maria" class="nombre"></td>
      <td>
        <button>datos</button>
      </td>
    </tr>
    
</table>
Y lo que necesito es que al pulsar el link "datos" me guarde en las variables id y nombre los valores de los dos inputs...
tengo el código en codepen con lo que he intentado pero no consigo sacar esos datos.
Como podría hacerlo?
GRacias a todos de antemano.
__________________
Tecnología y tutoriales
  #2 (permalink)  
Antiguo 17/11/2021, 00:35
Avatar de Marvin
Colaborador
 
Fecha de Ingreso: febrero-2005
Ubicación: global $Chile->Santiago;
Mensajes: 1.991
Antigüedad: 16 años, 9 meses
Puntos: 81
Respuesta: Detectar fila al hacer click en el boton para coger id de registro

Para trabajar correctamente con Javascript debes considerar el uso del html de manera estricta, en otras palabras, usar correctamente lo necesario para acceder a cada control.

Si bien en Javascript se permite la obtención de controles por clase, por atributo o incluso por nombre, la recomendación es que uses el acceso más directo a cada control, lo que usualmente se traduce como ID. Esto te servirá para evitar traer 20 controles y tener que escoger uno cuando lo que realmente necesitas es ir a buscar un sólo valor.
Código HTML:
<input type="text" value="1" class="id" id="primerInput" /> 
Por otro lado ten en cuenta que el ID de cada cosa debe ser distinto:
Código HTML:
<input type="text" value="1" class="id" id="primerInput" />
<input type="text" value="2" class="id" id="segundoInput" > 
Con esto agregado a tu HTML ya te permite usar un código Javascript para acceder al valor del primer control:
Código HTML:
<script type="text/javascript">
var inputUno = document.getElementById("primerInput").value;
alert(inputUno);
</script> 
Por lo que vi en tu codepen, estas usando jQuery. La manera de acceder a estos controles sería esta:
Código HTML:
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function() {
		alert($("#primerInput").val());
	});
});
</script> 
Ahora, para hacer lo que imagino quieres hacer, puedes usar este mecanismo, utilizando la estructura actual de tu HTML y sacando beneficios del uso de jQuery:
Código HTML:
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function() {
		//Con esto le dices que vayas al elemento "padre" del boton
		// (que es un td) y luego que suba al padre de los td (un tr)
		// y dentro de ese tr que encuentre el primer "hijo" (el primer td)
		td = $(this).parent().parent().find(':first-child');
		//Luego en ese primer td buscas el input con la clase .id y tomas el valor
		dataId = td.find('input.id').val();
		//Y en el siguiente td (next) buscas el input con la clase nombre
		dataNm = td.next().find('input.nombre').val();
		//Esto es para que puedas validar los datos en la consola
		console.log(dataId);
		console.log(dataNm);
	});
});
</script> 
Suerte!
__________________
El que dice "Solo sé que nada sé", esta asumiendo que sabe algo.
Lea las FAQ's!
  #3 (permalink)  
Antiguo 18/11/2021, 05:36
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Detectar fila al hacer click en el boton para coger id de registro

Muchísimas gracias Marvin!!!
Comprobado y funciona perfectamente!
Además con los comentarios tan explícitos me ha quedado clarísimo la forma de proceder para futuras ocasiones!
Mil gracias!!!!

Cita:
Iniciado por Marvin Ver Mensaje
Para trabajar correctamente con Javascript debes considerar el uso del html de manera estricta, en otras palabras, usar correctamente lo necesario para acceder a cada control.

Si bien en Javascript se permite la obtención de controles por clase, por atributo o incluso por nombre, la recomendación es que uses el acceso más directo a cada control, lo que usualmente se traduce como ID. Esto te servirá para evitar traer 20 controles y tener que escoger uno cuando lo que realmente necesitas es ir a buscar un sólo valor.
Código HTML:
<input type="text" value="1" class="id" id="primerInput" /> 
Por otro lado ten en cuenta que el ID de cada cosa debe ser distinto:
Código HTML:
<input type="text" value="1" class="id" id="primerInput" />
<input type="text" value="2" class="id" id="segundoInput" > 
Con esto agregado a tu HTML ya te permite usar un código Javascript para acceder al valor del primer control:
Código HTML:
<script type="text/javascript">
var inputUno = document.getElementById("primerInput").value;
alert(inputUno);
</script> 
Por lo que vi en tu codepen, estas usando jQuery. La manera de acceder a estos controles sería esta:
Código HTML:
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function() {
		alert($("#primerInput").val());
	});
});
</script> 
Ahora, para hacer lo que imagino quieres hacer, puedes usar este mecanismo, utilizando la estructura actual de tu HTML y sacando beneficios del uso de jQuery:
Código HTML:
<script type="text/javascript">
$(document).ready(function(){
	$("button").click(function() {
		//Con esto le dices que vayas al elemento "padre" del boton
		// (que es un td) y luego que suba al padre de los td (un tr)
		// y dentro de ese tr que encuentre el primer "hijo" (el primer td)
		td = $(this).parent().parent().find(':first-child');
		//Luego en ese primer td buscas el input con la clase .id y tomas el valor
		dataId = td.find('input.id').val();
		//Y en el siguiente td (next) buscas el input con la clase nombre
		dataNm = td.next().find('input.nombre').val();
		//Esto es para que puedas validar los datos en la consola
		console.log(dataId);
		console.log(dataNm);
	});
});
</script> 
Suerte!
__________________
Tecnología y tutoriales



La zona horaria es GMT -6. Ahora son las 10:20.