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/

更新：これにより、テーブルが正確に前のステータスに戻るはずです（すべてが非表示になるわけではありません）。また、.click（）の代わりに.on（）メソッドを追加しました

于 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 に答える