Question

I have the following table:

<table id="mytable">
<tr> 
<th class="hidden">id</th> 
<th>name</th> 
</tr> 
<tr> 
<td class="hidden">87</td> 
<td>Isle of Palms</td> 
</tr> 
</table> 

and then this jQuery code to hide the id column:

<script> 
$(function() {
$('.hidden').hide();
});
</script> 

I need to get the id cell hidden value when I click on any row but I cannot find the right selector. Any help will be appreciated. Thanx.

Answer 1

Try this:

$('tr').click(function () {

     var id = $(this).find('td.hidden').html();
});

UPDATE

$('tr').click(function () {

     var id = $(this).find('td.hidden:first').html();
});

If you have many columns and want to select the first one, you can use :first. Remember, this will add click event for all your rows in your table. I suppose you’re only intrested in the rows within your tbody, which your example doesn’t have. So I would do this instead:

<table id="mytable">
  <thead>  
    <tr> 
      <th class="hidden">id</th> 
      <th>name</th> 
    </tr>
  </thead>
  <tbody> 
    <tr> 
      <td class="hidden">87</td> 
      <td>Isle of Palms</td> 
    </tr> 
  </tbody>
</table> 

and then set click events for tbody rows

$('tbody tr').click(function () {

     var id = $(this).find('td.hidden:first').html();
});

Hope that helps!