JQuery 将整个表格行链接到锚点以触发 fancybox答案

【问题标题】：JQuery link entire table row to anchor to trigger fancyboxJQuery 将整个表格行链接到锚点以触发 fancybox
【发布时间】：2016-05-03 19:07:03
【问题描述】：

我找到了多种使用 jQuery 将整个表格行链接到另一个页面的方法。但是我为此尝试的每个解决方案都不适用于指向触发fancybox的div的锚点。

我有以下 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>

用下面的jQuery来触发点击事件：

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

<tbody> 标记包含 2 个表格行，因为结果行的布局方式。我想根据用户单击一行（或 tbody 标签）在花式框中显示 div 内容。

难道不能使用带有锚点的 data-href 吗？

【问题讨论】：

确保将tbody 包裹在table 元素中，否则您的选择器$('.result') 将为空。
你可以到达锚点。 window.location = $('a[href]',this).attr("href");

标签： javascript jquery html html-table fancybox-2

【解决方案1】：

如果要包装 2 个表行，请将 data 属性设置在 <table> 标记中，而不是 <tbody> 标记中。

那么你只需要一个简单的fancybox初始化脚本，比如：

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

并使用fancybox的特殊data属性设置href和type的内容喜欢

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

见JSFIDDLE

【讨论】：