How get grand parent text in a table with jquery

Question

I have some problems in accessing the text about a grand parent td in table.

When I click on delete, I would like that my function accesses the grand parent text : "fabien" but all I received is undefined.

this is my HTML:

<table class="table table-striped">
 <thead>
  <tr>
      <td>Name</td> 
      <td>Delete</td>
  </tr>
</thead>    
<tbody id="tabSelectUser">
      <tr>
         <td> fabien </td>
         <td><a onclick="javascript:aButtonPressed();"> delete</a></td>
      </tr>                                                                                </tbody>                                            
</table>

and this is my function:

<script type="text/javascript">
        function aButtonPressed(){
            var prevCell = $(this).parent().prev().text();
            console.log(prevCell);
</script>

Answer 1

Use Jquery to bind the click event, then your $(this) will work.

    <table class="table table-striped">
 <thead>
  <tr>
      <td>Name</td> 
      <td>Delete</td>
  </tr>
</thead>    
<tbody id="tabSelectUser">
      <tr>
         <td> fabien </td>
         <td><a href="#" class="deleteBtn"> delete</a></td>
      </tr>                                                                                </tbody>                                            
</table>

Javascript:

$(function() {
    $('.deleteBtn').click(aButtonPressed);
});

function aButtonPressed(){
    var prevCell = $(this).parent().prev().text();
    console.log(prevCell);
}