Эффект динамического скольжения с использованием jQuery для чтения данных из таблицы

Question

Я хочу перечислить некоторые записи из таблицы на странице ASP.NET. Для каждой записи я хочу отобразить некоторые данные и в то же время предоставить кнопку для их нажатия. Я хочу показать кнопку «НАЖМИТЕ, ЧТОБЫ ПРОСМОТРЕТЬ». Если они нажмут на кнопку, я хочу, чтобы окно скользило вниз (используя jQuery), чтобы отобразить другие детали записи. Пример того, что я ищу, можно найти здесь.

Образец выпадающего списка

Я бы предпочел иметь одну функцию для обработки деталей. Я бы хотел, чтобы поле отображалось прямо под каждой записью, а не внизу страницы. Есть ли способ сделать это с помощью 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();
            }
        }
    });
}