Question

样本表：

<table>

<tr class="record" id="10">
    <td>1/1/2010</td>
    <td>$10.00</td>
</tr>

<tr class="record" id="11">
    <td>1/3/2010</td>
    <td>$15.00</td>
</tr>

</table>

我使用这个JS在单击时从表行中抓取id，并形成一个URL（一些CodeIgniter标记）。

$(document).ready(function() {
    $('tr.record').bind('click', function() {
        var record_id = $(this).attr("id");
        var link = '<?php echo base_url(); ?>expenses/edit/' + record_id;
    });
});

使用该URL，我想在灯箱中打开PHP / HTML页面。

大多数jQuery灯箱解决方案（fancybox，jQuery Tools叠加）都需要a href来触发。

我想知道是否有人可以指出我如何在上面的JS之后自动完成此操作 - 也就是说，一旦record_id已知，就形成URL，然后自动触发显示的灯箱我的PHP / HTML页面。

关于此的任何指示？无论您喜欢哪种jQuery灯箱，都欢迎任何解决方案。

谢谢！

Answer 1

试试这个：

$(document).ready(function(){
    $('tr.record').bind('click', function(){

        var record_id   = $(this).attr("id");
        var link        = '<?php echo base_url(); ?>expenses/edit/' + record_id;

        $.fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'href'              : link
        });

    });
});

有关参数检查的更多信息： http://fancybox.net/api

Answer 2

我使用的fancybox比lightbox好得多，而且它的实现方式与lightbox几乎相同。您可以使用灯箱试试这个。基本上我所做的只是将表行作为触发fancybox的链接，将表行声明为：

<tr style="cursor:pointer" onclick='parent.$.fancybox({href:"#dom"}); return false;'></tr>

您也可以对表格单元格执行相同的操作：

<td style="cursor:pointer" onclick='parent.$.fancybox({href:"#dom"}); return false;'></td>

对于href，引用您正在调用的包含您要显示的内容的链接，div，ID或类。

如果您正在使用灯箱，您可以写下这样的内容：

<tr style="cursor:pointer" onclick='parent.$.lightbox({href:"#dom"}); return false;'></tr>

Answer 3

您应该可以使用ColorBox完成此操作。

我自己没有使用它，但有些演示似乎正在寻找你想要的东西。

jQuery - 点击表格行时如何触发灯箱？

3 个答案: