JQuery link entire table row to anchor to trigger fancybox

Question

I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.

I have the following HTML

<tbody class="result" data-href="#details1">
  <tr>
    <td rowspan="2" class="resultlogo">
     <img class="resultlogoimg" src="images/logos/logo-orshop.png">
    </td>
    <td class="resulthead">
     <h1><a class="detaillink" href="#details1">Orshop</a></h1>
    </td>
    <td rowspan="2" class="resultprice">
     <h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
       <span class="markbg"><h1>8,3</h1></span>
    </td>
  </tr>
  <tr>
    <td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
  </tr>
</tbody>

With the following jQuery to trigger the click event:

$(".result").click(function() {
   window.document.location = $(this).data("href");
});

The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).

Is it not possible to use data-href with anchors?

Make sure to wrap your tbody inside a table element, otherwise your selector $('.result') will be empty. — DavidDomain
You can reach anchor. window.location = $('a[href]',this).attr("href"); — Alex Kudryashev

JFK JFK · Accepted Answer · 2016-04-27T04:24:16

If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.

Then you only need a simple fancybox initialization script like:

$(".result").fancybox();

And use the fancybox's special data attributes to set the href and the type of content like

<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>

See JSFIDDLE

JQuery link entire table row to anchor to trigger fancybox

1 Answers