单击行后，JQuery / JavaScript从表中获取值

Question

Using JQuery or JavaScript, how can I get a value of a <td> in a <table> which looks like the following -

<table class="MyTable">
   <tr>
      <td>John</td>
      <td class="MyClass">5</td>
   </tr>
   <tr>
      <td>Sally</td>
      <td class="MyClass">9</td>
   </tr>
</table>

If a user clicks on "John's row", the value captured should be "5". If a user clicks on "Sally's row", the value captured should be "9".

I have the row captured in the following JQuery -

$('table.myTable tbody tr').on('click', function () {

   //I want to capture <td class="MyClass"> value here, something like this -
   var myValue = $("this.td#MyClass").val() //DOESN'T WORK!

}

I'm not sure what my $(this). statement should look like, I've tried several things like - $("this.td#MyClass").val() , but it returns 'undefined'. Any help would be appreciated. Thanks!

Answer 1

var myValue = $(this).find('.MyClass').text();

Use .val() when you're retrieving values from HTML controls, like <select> elements for instance. Here you're getting text so use .text()