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

[dryant]

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.

[Marvin]

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!

[dryant]

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!!!!

Iniciado por Marvin

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!