Question

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

然而，我想知道，有没有办法可以在点击时切换'显示全部'以显示'显示更少'，这样用户可以返回上一个视图？

以下是我正在使用的当前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();
        })
    });

非常感谢任何指示： - ）

Answer 1

这将有两种方式...如果显示所有，显示div ，如果显示更少，隐藏div

试试这个

working fiddle here

$('.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()

fiddel with effect

Answer 2

试试这个：

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（）

Answer 3

我认为此代码应该有效：

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

Answer 4

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

编辑：抱歉，忘了切换不适用于live / on

将'显示全部'按钮替换为'显示更少'onClick？

4 个答案: