Fabien Fabien - 1 month ago 6
Javascript Question

How get grand parent text in a table with jquery

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

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