Make table row clickable

Question

I have a table row that has background color on hover. When user clicks within the background color area, it should grab the link of the anchor tag inside the row and take the user there.. How do I do this?

<tr id="ClickableRow">
    <td>
<a href="http://somesite.com">Go Here</a>
<p> To find about all the interestng animals found in this tourist attractions including 
zebra, giraffe.....
....
</p>
    </td>
</tr>

How do I grab the anchor tab href value ?

 $('tr #ClickableRow').click(function () {
         window.location.href=Anchor tag's href value

        });

Answer 1

Ok first of all there's no need to specify a tr in the selector if you use an id anyway. And if you want to you should write that together without whitespace as the tr got that id.

Second, you need to use this and find() to select the first link inside the clicked table-row and get it's href attribute:

$('tr#ClickableRow').click(function () {
  var url = $(this).find('a:first').attr('href');
  window.location.href = url;
});

The following also works:

location = $(this).find('a:first').attr( 'href' );

See: Javascript: Setting location.href versus location