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

我正在尝试根据第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 all it works时，当我选择Finished时，它会出于某种原因显示它们！ 选择任何其他值会使所有行都隐藏！ ：S – 任何想法？

Answer 1

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

你仍然可以这样做：

 $（“。data tr”）。toggle（function（）{
   return refine ==“All”||  $（“td：eq（4）”，this）.text（）== refine;
 }）

而不是你的整个if / else 。

Answer 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 } }); } } 

Answer 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循环。

Answer 4

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

Answer 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++; }); } }