On click html table row, how do i specify each row?

Question

Let's say I have code.

<tbody>
  <tr id="a1">
    <td>a2</td>
    <td>a2</td>
  </tr>
  <tr id="a3">
    <td>4d</td>
    <td>a23</td>
  </tr>
</tbody>

If I want to get id value of the row I clicked.

<script>
$('tr').click(function(){
  var a = //something values
  alert(a);
});
</script>

What should I put inside something?

For another question(this is original problem of above question), when I have below code

<tbody>
  <tr>
    <td>a2</td>
    <td>a2</td>
  </tr>
  <tr>
    <td>4d</td>
    <td>a23</td>
  </tr>
</tbody>

And if I want second td value of the row I click which script code should I use?

Possible duplicate of [Getting the ID of the element that fired an event](https://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event) — Calvin Nunes, Dec 03 '18 at 10:50
(SOLVED) Thanks for the answers, found out i should use $('tbody tr') instead of just $('tr') — 임지웅, Dec 05 '18 at 08:18

Mamun · Accepted Answer · 2018-12-03T10:55:42.320

You can use this object from which you can get the id attribute:

$('tr').click(function(){
  var a = this.id
  alert(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="a1">
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr id="a3">
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

To get the second td you can use find() and eq()

$('tr').click(function(){
  var secondTD = $(this).find('td').eq(1).text();
  alert(secondTD);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="a1">
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr id="a3">
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 2 · answered Dec 03 '18 at 10:56

0

first question. you may use like this

<script>
    $('tr').click(function(){
        alert($(this).attr('id');
    });
</script>

And second question

You may use

$('tr').click(function(){
    alert($(this).find("td:nth-child(2)").html());
})

answered Dec 03 '18 at 10:56

Julian

1,592
1
13
33

score 0 · Answer 3 · answered Dec 03 '18 at 10:56

Make sure that the code runs after document is loaded. The second td value is in this snippet, too:

$(document).ready(function(){

$('tr').click(function(){
  var id = $(this).attr('id');
  var secondTdValue = $(this).find('td').eq(1).text();
});

});

score 0 · Answer 4 · answered Dec 03 '18 at 10:56

To answer your first question. You can use this.id to get the id of the row you clicked on.

$('tr').click(function() {
  var a = this.id;
  alert(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="a1">
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr id="a3">
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

However, this isn't needed for your second question. To do this you can use:

this.children[1].textContent;

Here this refers to the tr you clicked on, and .children is a collection of the td elements. Thus targeting index 1 of this array will give you the second td in the row.

See working example below:

$('tr').click(function() {
  var a = this.children[1].textContent;
  alert(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr>
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

On click html table row, how do i specify each row?

4 Answers4