jQuery根据单元格内容显示/隐藏表行

问题描述：

我正在尝试制作一些Javascript，以根据第四个单元格的内容显示/隐藏数据表中的行.

I'm trying to make some Javascript that shows/hides rows in a data table based on the content of the 4th cell.

表如下:

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函数上有以下代码:

And I have the following code on the onChange function of a dropdown:

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 

             }

        });

    }
}

基本上，下拉菜单中的状态是不同的，如果选择了它们，例如已完成"，则仅应显示状态为已完成"的行，而所有其他行都将隐藏.

Basically, the dropdown has the different statuses in, and if they selected, e.g Finished only the rows that have the status Finished should be shown and all others hidden.

但是它似乎无法正常工作.当我选择全部时，当我选择完成时，由于某种原因，它们全部显示！选择任何其他值将隐藏所有行！ :S-有什么想法吗?

But it doesn't seem to be working correctly. When I select All it works and when I select Finished it shows them all for some reason! Selecting any other value makes all rows hidden! :S - any ideas?

答

回答我自己的问题-感谢Paul的帮助！

Answering my own question - thanks for the help Paul!

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++;

        });
    }
}

jQuery根据单元格内容显示/隐藏表行

相关推荐