0

我有一个(id="tblID")从数据库填充的 HTML 表。这些行有一个 data 属性status，它可以是"Y"或"N"只有"Y"在页面加载时必须显示的行。在某处$(document).ready()有这个调用：它应该通过传递"Y"给来显示页面加载时的活动行showRowsByStatus：

$("#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方法。

4

1 回答 1

1

这段代码工作正常，我在你的 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-26T15:47:38.913 回答