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

I want to list some records from the table in a ASP.NET page. For each record, I want to display some data and at the same time, provide a button for them to click. I want to show a “CLICK TO VIEW BUTTON” If they click on the button, I want to have a box slide down (using jQuery) to display the other details for the record. An example of what I am looking for can be found here.

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

Sample of drop down

下拉样本

I would prefer to have one function to handle the details. I would like the box to appear right underneath each record and not at the bottom of the page. Is there a way to do this using jQuery? I was looking at the wrap, append but was not sure on how to go about implementing this.

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

1 个解决方案

#1

Put the box in your ASP markup, but hide it:

将框放在ASP标记中,但隐藏它:

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

Now implement a function to show/load:

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

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();
            }
        }
    });
}

#1