I want to get the value of a cell when I click on another cell

Question

I want to get the value of a cell when I click on another cell

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good morning a greeting I have this table that has 3 rows and 4 columns ..

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

What I want is that when darclick on the element td that has the value d and h, as a result an alert with the value a and e respectively ...

That is to say when clicking on the cells in column 4, I get the result of column1 of that same row.

thanks

jquery

asked by jehs 29.12.2017 в 19:05

source

2 answers

0

It is enough to first select the last <td> of each <tr> that are going to have the event, then depending on the element that was given click we select by means of its parent element the first <td> that is the element that contains the value to be displayed.

Functional example:

$(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>

We can also select the value of the <td> through its brother without interacting with the parent element <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>

answered by 29.12.2017 в 20:22

displacement of an object in game maker Error sending form by POST in php

score 0 · Accepted Answer

The easiest way I can think of is using classes to identify both the cell to click on and the data to show:

$(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>

But if it's about not modifying the 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>