0

Buen dia un saludo tengo esta tabla que tiene 3 filas y 4 columnas ..

<table>

<tr>
<td>columna 1</td>
<td>columna 2</td>
<td>columna 3</td>
<td>columna 4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>

</table>

lo que quiero es que al darclick en el elemento td que tiene el valor d y h, de como resultado una alerta con el valor a y e respectivamente...

Es decir al dar click en las celdas de la columna4 me den como resultado el valor de la columna1 de esa misma fila..

gracias

1
  • ¿Podrías editar tu pregunta y agregar el código que has intentado? Así podemos ayudarte a identificar donde esta el error.
    – Marcos
    Commented el 29 dic. 2017 a las 18:35

2 respuestas 2

0

La forma más fácil que se me ocurre es utilizando clases para identificar tanto la celda sobre la que hacer click como la del dato a mostrar:

$(function(){
  $('.button').click(function(){
    alert($(this).parent().find('.data').text());
  });
});
.button{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>columna 1</td>
    <td>columna 2</td>
    <td>columna 3</td>
    <td>columna 4</td>
  </tr>
  <tr>
    <td class="data">a</td>
    <td>b</td>
    <td>c</td>
    <td class="button">d</td>
  </tr>
  <tr>
    <td class="data">e</td>
    <td>f</td>
    <td>g</td>
    <td class="button">h</td>
  </tr>
</table>

Pero si se trata de no modificar el HTML:

$(function(){
  $('tr td:last-child').click(function(){
    console.log($(this).parent().find('td:first').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>columna 1</td>
    <td>columna 2</td>
    <td>columna 3</td>
    <td>columna 4</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
  </tr>
</table>

1
  • muchas gracias ....saludos ...
    – jehs
    Commented el 29 dic. 2017 a las 20:23
0

Basta con seleccionar primeramente los últimos <td> de cada <tr> que son los que van a tener el evento, luego dependiendo del elemento al que se le dio click seleccionamos por medio de su elemento padre al primer <td> que es el elemento que contiene el valor a mostrar.

Ejemplo funcional:

$(document).ready(function(){
  $('table tr td:last-child').click(function(){
    var valor = $(this).parent().find('td:first-child').text();
    
    console.log(valor);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

<tr>
<td>columna 1</td>
<td>columna 2</td>
<td>columna 3</td>
<td>columna 4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>

</table>

También podemos seleccionar el valor del <td> por medio de su hermano sin interactuar con el elemento padre <tr>

$(document).ready(function(){
  $('table tr td:last-child').click(function(){
    var valor = $(this).siblings('td:first-child').text();
    
    console.log(valor);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

<tr>
<td>columna 1</td>
<td>columna 2</td>
<td>columna 3</td>
<td>columna 4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>

</table>

1
  • gracias me funciono muy bien ...saludos!!!
    – jehs
    Commented el 29 dic. 2017 a las 20:22

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.