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 

             }

        });

    }
}

基本上，下拉菜单有不同的状态，如果他们选择了，例如完成，只有状态为完成的行应该显示，所有其他的都隐藏。

但它似乎无法正常工作。当我选择 All it works 并且当我选择 Finished 时，它会出于某种原因将它们全部显示出来！选择任何其他值会隐藏所有行！:S - 有什么想法吗？

4

5 回答 5

4

在您的循环$("td:eq(4)")中选择整个页面中的表格单元格（不仅是循环中的行）。

你仍然可以这样做：

$(".data tr").toggle(function() {
  返回细化==“全部”|| $("td:eq(4)", this).text() == 细化；
})

而不是你的整个if/ else。

于 2012-09-12T09:52:39.787 回答
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 回答
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 值。如果它只是一个字符串，你可以替换数组 for 循环。

于 2014-10-18T21:34:04.033 回答
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 回答