0

我目前正在使用表格上的“全部显示”按钮来显示所有表格条目：

http://jsfiddle.net/SCpgC/

但是，我想知道，有没有一种方法可以在单击时切换“全部显示”以显示“减少显示”，以便用户可以返回上一个视图？

这是我正在使用的当前 JavaScript：

var numShown = 2; // Initial rows shown & index

    $(document).ready(function() {
        // Hide rows and add clickable div

        $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');

        $('.more').click(function() {
            var numRows = $(this).prev().find('tr').show();
            $(this).remove();
        })
    });

非常感谢任何指针:-)

4

4 回答 4

2

这将适用于两种方式......如果显示所有它会显示 div，如果显示更少它会隐藏 div

尝试这个

在这里工作小提琴

$('.more').click(function() {
    if ($(this).hasClass("show")) {
        var numRows = $(this).prev().find('tr').show();
        $(this).text('Reveal Less');
        $(this).removeClass('show').addClass('hide');
    }
    else {
        $(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide();
        $(this).removeClass('hide').addClass('show');
        $(this).text('Reveal All');
    }
});

并使用一些效果fadeIn()和fadeOut()

小提琴与效果

于 2013-03-25T09:48:30.540 回答
1

尝试这个：

var numShown = 2; // Initial rows shown & index
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');
    $('.more').on('click',function() {
        if ($(this).text()=="Reveal All") {
         $(this).prev().find('tr:gt(' + (numShown - 1) + ')').show();
            $(this).text("Reveal less");
        } else {
           $(this).prev().find('tr:gt(' + (numShown - 1) + ')').hide();
            $(this).text("Reveal All");
        }
    });
});

http://jsfiddle.net/SCpgC/4/

更新：这应该将表返回到以前的状态（不会隐藏所有内容）。还添加了 .on() 方法而不是 .click()

于 2013-03-25T09:45:28.037 回答
0

我认为这段代码应该可以工作：

var numShown = 2; // Initial rows shown & index
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Reveal All</div>');
    $('.more').click(function() {
        if ($(this).text()=="Reveal All") {
            $('table').find('tr:gt(' + (numShown - 1) + ')').show();
            $(this).text("Reveal less");
        } else {
            $('table').find('tr:gt(' + (numShown - 1) + ')').hide();
            $(this).text("Reveal All");
        }
    });
});
于 2013-03-25T09:42:13.810 回答
0 
var numShown = 2; // Initial rows shown & index
var hideText = 'Hide all';
var revealText = 'Reveal all';

$(document).ready(function() {
    // Hide rows and add clickable div

    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">' + revealText + '</div>');
    var numRows;
    $('.more').toggle(function() {
        numRows = $(this).prev().find('tr').show();
        $(this).text(hideText);
    }, function() {
        numRows = $(this).prev().find('tr').hide();
        $(this).text(revealText);
    });
});

编辑：抱歉，忘记了切换不适用于实时/开启

于 2013-03-25T09:42:27.557 回答