How to get the value of 2nd td in html table on click of first td using jquery

Question

I have a requirment where i need to get the value of 2nd td in html table on click of first column in html table. I am using jquery to achieve this.

$('.tbody').on('click','tr td:nth-child(1)', function () {
    var id = $(this).closest("td").find('td:eq(1)').text();
    alert(id)
});

I am using onclick function to get the value of second td as shown in the above code.But i am getting an empty alert. I dont know where i have gone wrong please help. As per my understanding $(this).closest("td").find('td:eq(1)').text() should search for next td and .text() method should display the value within td isn'tit?

Below snippet will reflect the issue mentioned above

Please help!

Thanks in advance!

$(function () {
    $('.tbody').on('click','tr td:nth-child(1)', function () {
        var id = $(this).closest("td").find('td:eq(1)').text();
        alert(id)
    });
});

#items {
    border-collapse: collapse;
    width: 100%;
}
#items th {
    background-color: #009999;
    color: white;
    border : 1px solid;  
}
#items td{
    border : 1px solid;
}
#items tbody{
    height:200px;
    overflow-y:auto;
}
#items thead,.tbody{
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">    
    <table class="table table-striped table-bordered table-hover table-condensed" style="width: 300px; "  id="items">
	<thead>
            <tr>
	        <th style="width:100px;">Fee Type</th>
		<th style="width:100px;">Charges per Qty</th>
		<th style="width:100px;">Qty</th>
	    </tr>
	</thead>
	<tbody class="tbody">
	<tr>
            <td style="width:100px;">a</td>
            <td style="width:100px;">b</td>
            <td style="width:100px;">c</td>
        </tr>
        <tr>
            <td style="width:100px;">d</td>
            <td style="width:100px;">e</td>
            <td style="width:100px;">f</td>
        </tr>
	</tbody>
    </table>
</div>

Answer 1

Just change the closest element (td to tr) and you will get the expected result

var id = $(this).closest("tr").find('td:eq(0)').text();

Answer 2

The issue with your logic is that this refers to the td already, so closest('td') isn't going to get the element you need. It's also not the parent of the td you want to target either, so find() won't work. You need to use closest('tr') instead:

var id = $(this).closest("tr").find('td:eq(1)').text()

However, the simplest method to achieve this would be to just use next() as the td elements are siblings:

$(function() {
  $('.tbody').on('click', 'tr td:nth-child(1)', function() {
    var id = $(this).next().text();
    console.log(id);
  });
});

#items {
  border-collapse: collapse;
  width: 100%;
}

#items th {
  background-color: #009999;
  color: white;
  border: 1px solid;
}

#items td {
  border: 1px solid;
}

#items tbody {
  height: 200px;
  overflow-y: auto;
}

#items thead,
.tbody {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table table-striped table-bordered table-hover table-condensed" style="width: 300px; " id="items">
    <thead>
      <tr>
        <th style="width:100px;">Fee Type</th>
        <th style="width:100px;">Charges per Qty</th>
        <th style="width:100px;">Qty</th>
      </tr>
    </thead>
    <tbody class="tbody">
      <tr>
        <td style="width:100px;">a</td>
        <td style="width:100px;">b</td>
        <td style="width:100px;">c</td>
      </tr>
      <tr>
        <td style="width:100px;">d</td>
        <td style="width:100px;">e</td>
        <td style="width:100px;">f</td>
      </tr>
    </tbody>
  </table>
</div>