0

複数の列を持つテーブルがあり、複数の選択を使用してフィルター処理したいと考えています。各選択は特定の列に対応します。選択が変更されると、選択に対応する列が同じ値を持つ行のみがテーブルに表示されます。

私は少し JSFiddle を始めました。どんなアイデアでも役に立ちます。

私がこれまでに行ったこと：

var filter = $('select');

filter.change(function() {
    var table = $('table');
    var rows = $('tr');
    var filterValue = $(this).val();
});

http://jsfiddle.net/ibnclaudius/BnPa6/15/

4

2 に答える 2

0

私の理解では、選択したオプションに等しい td を強調表示しようとしています。

var filter = $('select');
filter.change(function () {
    var table = $('table');
    var rows = $('tr');
    var filterValue = $(this).val();
    $('tr td').css('color', 'black')
    $('tr td').each(function () {
        if (filterValue == $(this).text()) {  // I have testing for the matches
            $(this).css('color', 'red')
        }
    });
});

を使用してsを反復することtdを知っておく必要がある重要なポイントは次のとおりです。.each()

ここにjsFiddleがあります

ご理解いただければ幸いです。

アップデート:

1）クリックされている選択のラベル名を取得します

var col = $(this).parent().find('label').text();

2)ここでは、以下の行を使用して列番号を取得しています

var colNumber = col.replace("Column ", "")

これは、選択されている選択の列番号を返します。

3) this の助けを借りてanswer、列を反復する方法を見つけました。

これで、より深い理解が得られます。

$("table tr td:nth-child(" + colNumber + ")").each(function () {
        if (filterValue == $(this).text()) {
            $(this).css('color', 'red');
        }
    });

JSFiddle1

最初のコメントについては、change以下のようにイベントをトリガーするだけです

$('select').change();

JSFiddle2

于 2013-11-06T14:31:51.047 に答える