2

文字ベースのナビゲーションを適用して、テーブルとリストのコンテンツをフィルター処理します。文字の 1 つをクリックすると、リスト/テーブルがフィルター処理され、その文字で始まるリスト/テーブルのアイテムのみが表示されます。

しかし、私が直面している問題は「すべてのリスト」です。「すべて」リンクも表示する必要があります。「すべて」リンクを追加するのを手伝ってください..

$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {      
        var _letter = $(this), _text = $(this).text(), _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;
                $(this).fadeIn(400);
            }
        });                   
    });
});

ここにデモリンクがあります...

ありがとう...

4

3 に答える 3

2

テキストが等しくない場合にのみ正規表現を適用しますAll

$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {
        var _letter = $(this),
            _text = $(this).text(),
            _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (_text === 'All') {
                _count += 1;
                $(this).fadeIn(400);
            } else {
                if (RegExp('^' + _text).test(_cellText)) {
                    _count += 1;
                    $(this).fadeIn(400);
                }
            }
        });
    });
});

フィドルをチェック

于 2013-06-18T07:14:44.327 に答える
2

すべて表示するtrだけclick()

$('a').first().click(function(){
$('#countries-table tbody tr').fadeIn(400);
});

jsfiddleへのリンク

于 2013-06-18T07:15:29.290 に答える
1

[更新しました]

簡単なもの

この行を追加するだけです：

if(_text == 'All') _text = '.';

デモ

編集 ：

必要に応じて、このコードを使用すると、単語のない文字をフェードできます。

_alphabets.not(':first').css('opacity','0.5');
_contentRows.each(function(){
    var beg = $(this).children('td:first').text().trim()[0];
    $('.alphabet a:eq('+(beg.charCodeAt(0)-64)+')').css('opacity','1.0');
});

デモ

説明: ここで行ったことは、すべての trs の最初の各 td の最初の文字を取得し、それを ascii (A=65 ..) に変換してから、64 を差し引いて、最初のインデックスが 1 (A) から始まるようにすることです (index 0 は「すべて」)

注: 最初の文字を比較するだけなので、正規表現を使用する必要はまったくありません。正規表現を削除することで効率を上げることができます。

于 2013-06-18T07:15:32.730 に答える