0

以下の関数を使用して、正常に機能している入力フィールドに基づいてテーブルをフィルタリングしています。

現在、これは固定列インデックスを参照しており、ここでは " " と言います'td:eq(3)'。

固定列インデックスを使用する代わりに、ここで変数「colIndex」を参照するにはどうすればよいですか? また、以下のテーブル クラス ("myTable") を参照する必要がないように、最初のコード行に基づいて現在のテーブルの ID を取得する方法はありますか?

私のコード（作業中）：

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:eq(3)').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

これについて助けてくれてありがとう、ティム。

4

3 に答える 3

1

次のように、セレクターである文字列に連結できます。

$(this).find('td:eq(' + colIndex + ')')

あなたに与える

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");

    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:eq(' + colIndex + ')').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

次のようなことを行う方が簡単なようです:

$('.myClass').on('keyup', function () {
    var idx = $(this).closest('th').index(),
        val = this.value.toLowerCase();

    $('.myTable tr:gt(1)').css('display', function() {
        return $('td', this).eq(idx).text().toLowerCase() == val ? 'block' : 'hide';
    });
});
于 2013-11-24T13:13:10.743 に答える
1

文字列連結を使用する必要があります

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:eq(' + colIndex + ')').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

または私の好みの方法は、.eq()を使用することです

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td').eq(colIndex).text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

あなたが試すことができるいくつかの変更は次のとおりです。

var $table = $('.myTable');
$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $table.find('tr').slice(1).each(function () {
        $(this).toggle(regex.test($(this).find('td').eq(colIndex).text()));
    });
});
于 2013-11-24T13:13:16.040 に答える