使用jQuery从表中读取数据的动态Slidedown效果

Question

我想在ASP.NET页面中列出表中的一些记录。对于每条记录，我想显示一些数据，同时提供一个按钮供他们点击。我想显示“点击查看按钮”如果他们点击按钮，我想让一个盒子向下滑动（使用jQuery）来显示记录的其他细节。我可以在这里找到我正在寻找的一个例子。

Sample of drop down

我希望有一个功能来处理细节。我希望该框显示在每条记录的正下方，而不是在页面底部。有没有办法使用jQuery做到这一点？我正在看包装，附加但不确定如何实现这一点。

Answer 1

将该框放入ASP标记中，但隐藏它：

<a href="javascript:showDetails(123);">Show details</a>
<div id="details123" style="display: none"></div>

现在实现一个显示/加载的功能：

function showDetails(recordId) {
    var detailsDiv = $("#details" + recordId);
    // load stuff -- replace this with whatever is 
    // appropriate for your app
    $.getJSON("/myapp/someJSONfunction?recordId=" + recordId,
        null,
        // this will be run if successful
        function(data) {
            if (data.value) {
                detailsDiv.text(data.value).slideDown();
            }
        }
    });
}