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

Posted 2023-05-09

【中文标题】jQuery 根据单元格内容显示/隐藏表格行

【英文标题】：jQuery show/hide table rows based on cell content

【发布时间】：2012-09-05 07:20:57

【问题描述】：

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

表格如下：

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 - 有什么想法吗？

【参考方案1】：

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

你仍然可以这样做：

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

而不是你的整个if/else。

【参考方案2】：

尝试使用 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 

             

        );

    

【讨论】：

做到了！然而它也隐藏了标题行——有什么简单的方法可以避免这种情况吗？另外，我有每隔一行背景着色的 CSS。隐藏行显然会解决这个问题，有没有办法“再生”这个填充？干杯。

您可以添加一个索引并在每个循环中递增它。如果'i == 1'（标题行），则始终显示该行。对于行颜色，使用样式表中的“第 n 个子”选择器 davidwalsh.name/css-tables-css3-alternate-row-colors

好的 - 我已经让标题工作了，我认为我已经接近 CSS，但无法找出正确的选择器。我有pastebin.com/HkiEeMTC 但它不起作用！

【参考方案3】：

 $(".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循环替换数组。

【参考方案4】：

在您对每一行的循环中，您错过了$(this) 来引用您当前的元素。 然后，使用 find() 过滤选择$(this).find("td:eq(4)").text() == refine

【参考方案5】：

回答我自己的问题 - 感谢 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++;

        );