JQuery Link ganze Zeile der Tabelle zu verankern fancybox zu lösen

Question

Ich habe mehrere Möglichkeiten gefunden, eine ganze Tabellenzeile mit einer anderen Seite mit jQuery zu verknüpfen. Aber jede Lösung, die ich dafür ausprobiert habe, funktioniert nicht mit Ankern, die auf ein Div zeigen, das eine Fancybox auslöst.

Ich habe folgende 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> 

Mit dem folgenden jQuery das Click-Ereignis auszulösen:

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

Die <tbody> Tag wickelt 2 Tabellenzeilen wegen der Art und Weise eine Ergebniszeile gelegt wird aus . Ich möchte div-Inhalte in einer Fancybox anzeigen, basierend darauf, dass der Benutzer auf eine Zeile (oder ein tbody-Tag) klickt.

Ist es nicht möglich, Data-href mit Ankern zu verwenden?

Answer 1

Wenn Sie die 2 Tabellenzeilen umbrechen möchten, geben Sie data Attribute im Tag <table> ein und nicht im Tag <tbody>.

Dann brauchen Sie nur eine einfache fancybox Initialisierungsscript wie:

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

und verwenden Sie die fancybox Sonder data die href und die type von Inhalten wie

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

Siehe Attribute JSFIDDLE