jQuery根據單元格內容顯示/隱藏表格行

我正在嘗試使一些基於第4單元格的內容顯示/隱藏數據表中的行的Javascript。jQuery根據單元格內容顯示/隱藏表格行

表如下：

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的行應顯示，其他隱藏。

但它似乎沒有正常工作。當我選擇所有它的作品，當我選擇完成它顯示他們都出於某種原因！選擇任何其他值會隱藏所有行！：S - 有什麼想法？

來源

2012-09-12 swiss196

回答我的問題 - 感謝您的幫助保羅！

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-12 10:33:04 swiss196

嘗試使用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-12 09:45:55

這樣做了！然而，它確實隱藏了標題行 - 任何簡單的方法來避免這種情況？另外，我有CSS可以爲其他行背景着色。隱藏行顯然是螺絲釘，有什麼辦法'重新生成'這個填充？乾杯。 – swiss196

您可以添加一個索引並在每個循環中增加它。然後，如果'i == 1'（標題行）始終顯示該行。對於行顏色，請在樣式表中使用「第n個孩子」選擇器http://davidwalsh.name/css-tables-css3-alternate-row-colors –

好吧 - 我已經開始工作了，米附近的CSS，但無法弄清楚正確的選擇器。我有http://pastebin.com/HkiEeMTC但它不起作用！ – swiss196

在你的循環$("td:eq(4)")在選擇表格單元格整個頁面（不僅是循環中的行）。

你仍然可以做到這一點：

 
$(".data tr").toggle(function() { 
    return refine == "All" || $("td:eq(4)", this).text() == refine; 
})

，而不是你的整個if/else。

來源

2012-09-12 09:52:39

在您遍歷每一行的循環中，您錯過$(this)來引用您當前的元素。
然後，使用find（）方法來過濾選擇
$(this).find("td:eq(4)").text() == refine

來源

2012-09-12 09:52:52

$(".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-18 21:34:04

jQuery根據單元格內容顯示/隱藏表格行

回答

相關問題