无法使用jQuery根据条件显示表格行

我有一个从数据库填充的HTML表(id="tblID")。这些行的数据属性为status，它可以是"Y"或"N"，并且只有具有"Y"的行才会在页面加载中显示。某处$(document).ready()有这一呼吁：通过传递"Y"到showRowsByStatus这是为了显示在页面加载活动行：无法使用jQuery根据条件显示表格行

$("#tblID tr").each(function() { 
    showRowsByStatus("Y", $(this)); 
});

另外也复选框Show Inactive Rows其选中时会显示无效行和未选中时将显示活动行。

$("#chkBox").change(function() { 
    if (this.checked) { 
     $("#tblID tr").each(function() { 
      showRowsByStatus("N", $(this)); 
     }); 
    } 
    else { 
     $("#tblID tr").each(function() { 
      showRowsByStatus("Y", $(this)); 
     }); 
    } 
});

这是showRowsByStatus方法的定义：

function showRowsByStatus(activeStatus, tr) { 
    if (tr.data("status") == activeStatus && tr.data("status") != undefined) { 
     tr.show(); 
    } 
    if (tr.data("status") != activeStatus && tr.data("status") != undefined) { 
     tr.hide(); 
    } 
}

现在我面临的问题是，在页面加载不被显示在所有有效行，但是当我切换复选框Show Inactive Rows，行按预期显示。

我在showRowsByStatus方法中丢失了什么？

我还发现当页面加载时，style="display:none"正被添加到所有行。我已经检查了项目中的每一处，并且找不到将这种样式设置为这些行的任何内容。我试图隐藏.css("display","none !important")和.css("display","block !important")显示，但它没有帮助。所以我想我应该修复showRowsByStatus方法。

来源

2013-07-26 Animesh

似乎就像加载状态的每一行是“N”。请检查或提供相同的小提琴。 –

你说数据属性被称为'status'，但是正在检查一个名为'role'的属性 - 这是正确的吗？ – Orbling

我更正了上面的代码。正确的变量是'状态'。 – Animesh

此代码工作正常，我没有改变你的jQuery代码。可能与您的HTML代码有关。你可以试试看：http://seo035.com/test/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test Inactive Row</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
</head> 
<body> 
<script> 
$(document).ready(function(){ 
    $("#tblID tr").each(function() { 
     showRowsByStatus("Y", $(this)); 
    }); 

    $("#chkBox").change(function() { 
     if (this.checked) { 
      $("#tblID tr").each(function() { 
       showRowsByStatus("N", $(this)); 
      }); 
     } 
     else { 
      $("#tblID tr").each(function() { 
       showRowsByStatus("Y", $(this)); 
      }); 
     } 
    });  
}) 

function showRowsByStatus(activeStatus, tr) { 
    if (tr.data("status") == activeStatus && tr.data("status") != undefined) { 
     tr.show(); 
    } 
    if (tr.data("status") != activeStatus && tr.data("status") != undefined) { 
     tr.hide(); 
    } 
} 

</script> 
<table id="tblID"> 
<tr data-status="Y"><td>Row Y</td></tr> 
<tr data-status="N"><td>Row N</td></tr> 
</table> 
<form> 
<input id="chkBox" type="checkbox" name="chkBox" value=""> 
</form> 
</body> 
</html>

来源

2013-07-26 15:47:38

Fabien，感谢您为我验证这一点，并确认它工作得很好。这迫使我看着其他的东西，发现一些可能导致项目消失的原因。 – Animesh

无法使用jQuery根据条件显示表格行

回答

相关问题