Question

我正在尝试构建一个方便的功能，我计划滚动到库函数中，以便我可以重复使用。

常见情况如下;

假设我们有一个包含一些行和列的常规表;

示例

<table>
    <tr><td>row 1 col 1</td><td>row 1 col 2</td><td>row 1 col 3</td></tr>
    <tr><td>row 2 col 1</td><td>row 2 col 2</td><td>row 2 col 3</td></tr>
    <tr><td>row 3 col 1</td><td>row 3 col 2</td><td>row 3 col 3</td></tr>
</table>

我们希望发生以下情况;

点击一个TD单元格（比如第1行/第1列）并响应此点击事件，该行右下方会出现一个分区（手风琴效果很好），该分区基本上是一个iframe拉伸100％进入该分区，其中src包含您在该单元格上单击的值;像site.com?id=THAT_VALUE_HERE

这样的东西

通过这种方式，可以方便地点击此表中的单个单元格，并根据需要将相关数据拉入iframe，在点击它之后将其拉到下方。只需重新点击相同的值，iframe部门即可关闭。当然，您可以在其他单元格上执行相同操作。

我知道这一切都是通过JQuery实现的，但我可能需要一段时间才能完成这项工作好教程。

有人可以指出如何实现这一目标的教程吗？

Answer 1

您不必为此使用iFrame。你可以做一个常规的ajax调用。

$('tr').on('click', function(){
    //You could store target data directly in the td's, or however you want. 
    //This is just a quick example
    var target = $(this).attr('title');

    $.get(target, "", function(data){
        $('#contentDiv').html(data);
    });

});

使用JQuery创建一个方便的数据显示界面 - 按需 - 通过iframe

1 个答案: