임지웅
임지웅

Reputation: 151

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

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?

Upvotes: 1

Views: 70

Answers (4)

Nick Parsons
Nick Parsons

Reputation: 50664

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>

Upvotes: 0

Sergej G.
Sergej G.

Reputation: 13

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();
});

});

Upvotes: 0

Julian
Julian

Reputation: 1612

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());
})

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

Related Questions