0

4 番目のセルの内容に基づいてデータ テーブルの行を表示/非表示にする Javascript を作成しようとしています。

表は次のとおりです。

DATE | DESCRIPTION | PRICE | PHONE |  STATUS  |
-----------------------------------------------
xxx  | yyyyyyyyyyy | 3243  | 32553 | Finished |
xxx  | yyyyyyyyyyy | 3243  | 32553 | Suspeded |
xxx  | yyyyyyyyyyy | 3243  | 32553 | Active   |
xxx  | yyyyyyyyyyy | 3243  | 32553 | Finished |

そして、ドロップダウンの onChange 関数に次のコードがあります。

function refinesearch() {
    $(".data tr").hide(); //hide all rows
    var refine = $("#refine1").val(); //retrieve wanted status

    if(refine=="All") {
        $(".data tr").show(); //show all rows if want to see All
    } else {

        $(".data tr").each(function() { //loop over each row

             if($("td:eq(4)").text() == refine) { //check value of TD
                 $(this).show(); //show the row 

             }

        });

    }
}

基本的に、ドロップダウンにはさまざまなステータスがあり、たとえば Finished を選択すると、ステータスが Finished の行のみが表示され、その他はすべて非表示になります。

しかし、正しく動作していないようです。[すべて] を選択すると機能し、[完了] を選択すると何らかの理由ですべてが表示されます。他の値を選択すると、すべての行が非表示になります! :S - 何かアイデアはありますか?

4

5 に答える 5

4

ループ$("td:eq(4)")では、（ループ内の行だけでなく）ページ全体でテーブルセルを選択しています。

あなたはまだこれを行うことができます：

$（"。datatr"）。toggle（function（）{
  リファインを返す=="すべて"|| $（ "td：eq（4）"、this）.text（）==リファイン;
}）

あなたの全体の代わりにif/ else。

于 2012-09-12T09:52:39.787 に答える
1 
 $(".newgrid tbody tr td:nth-child(5)").each(function () {

                    var found = false;
                    for (i = 0; i < selected.length && !found; i++) {
                        if ($(this).text().toLowerCase().indexOf(selected[i].toLowerCase()) >= 0) {
                            found = true;
                        }
                    }
                    if (!found)
                        $(this).parent().hide();
                    else
                        $(this).parent().show();

                });

これでうまくいきます。selected は、チェックする可能性のある td 値を含む配列です。単なる文字列の場合は、ループの配列を置き換えることができます。

于 2014-10-18T21:34:04.033 に答える
1

find() メソッドを使用して、条件を現在の行に制限してみてください (ループごとにテーブル内のすべての行を選択しています)。

function refinesearch() {
    $(".data tr").hide(); //hide all rows
    var refine = $("#refine1").val(); //retrieve wanted status

    if(refine=="All") {
        $(".data tr").show(); //show all rows if want to see All
    } else {

        $(".data tr").each(function() { //loop over each row

             if($(this).find("td:eq(4)").text() == refine) { //check value of TD
                 $(this).show(); //show the row 

             }

        });

    }
}
于 2012-09-12T09:45:55.173 に答える
0

各行のループで$(this)、現在の要素を参照できません。
次に、find（）を使用して選択をフィルタリングします
$(this).find("td:eq(4)").text() == refine

于 2012-09-12T09:52:52.470 に答える
0

私自身の質問に答える - 助けてくれてありがとう、ポール!

function refinesearch() {

    var count = 1;
    $(".data tr").hide(); //hide all rows
    $(".data tr:first").show();
    $(".data tr:nth-child(2)").show();

    var refine = $("#refine1").val(); //retrieve wanted status
    if(refine=="All") {
        $(".data tr").show(); //show all rows if want to see All
    } else {

        $(".data tr").each(function() { //loop over each row

            if($(this).find("td:eq(4)").text() == refine) { //check value of TD

                $(this).find("td").css({"background": "#fff", "border-right" : "none"});
                $(this).show(); //show the row 

            }

        });

        $(".data tr:visible").each(function() { //loop over each row

            if(isEven(count)) {
                $(this).find("td").css({"background" : "#D4EDF9", "border-right" : "3px solid #D4EDF9" });
            }

            count++;

        });
    }
}
于 2012-09-12T10:33:04.883 に答える