Search code examples
jqueryhyperlinkhtml-tablerowhref

Table with two links - table row clickable - jQuery

I've a table containing 2 links,

  • if I click the 'button' the link should target 'page1'

  • if I click the entire row the should target 'page2'

I'm currently stuck with the jQuery Javascript - can someone give me an advice?

HTML & JQuery / JS

<tr>
  <td><a href="page2.html" class="info"><img src="img/img.png" alt="image" class="tlogo"/></a></td>
  <td>Some Text</td>
  <td><a href="page1.html" class="tbutton">Go to page1</a></td>
</tr>

    $(document).ready(function() {
        $('#myTable tr').click(function() {
            var href = $(this).find("a").attr("href");
            if(href) {
                window.location = href;
            }
        });
    });
Solution

  • If you click on the button, the row click will be fired too. The way to stop that is to use event.stopPropagation();

    That will cancel any events that will fire after that, so if you put that in the button click event, the row click event will not fire.