Question

基本上，当循环遍历每个项目时，我有两种不同类型的标题，基于表格的内容：

JS CODE：

if (idLayer == "nss") {
    var tabs = [];
    for (var layerId in layers) {

        var results = layers[layerId];
        idResults[idLayer + layerId] = results;
        var useHeaderComm = false;
        var count = results.length;
        var label = "", content = "";
        var resultsId = idLayer + layerId;
        switch (layerId) {
            case "2":
                label = "New Sale Sites(" + count + ")";                    
                if (count == 0) break;
                    content += "<table><tr id='headerComm'><th>Location</th><th>Planning Area</th><th>Development Type</th><th>GPR</th><th>Site Area</th><th>Allowable GFA</th><th>Office GFA</th><th>Retail GFA</th><th>Other GFA</th></tr>";
                    content += "<table><tr id='headerResi'><th>Location</th><th>Planning Area</th><th>Development Type</th><th>GPR</th><th>Site Area</th><th>Estimated DU</th></tr>";
                for (var j = 0; j < count; j++) {
                    if (latlng !== 'Null') {
                        var attributes = results[j].feature.attributes;
                        var resultsId = idLayer + layerId;
                        if(attributes["LAND_USE"] == "COMM" || attributes["LAND_USE"] == "OFF" )
                        {
                            content += "<tr>";
                            content += "<td><a href='javascript:void(0)' onclick='showFeature(\"" + resultsId + "\"," + j + ")'>" + attributes["LOCATION"] + "</a></td>";              
                            content += "<td>" + attributes["PLANNING_AREA"] + "</td>";
                            content += "<td>" + attributes["LAND_USE"] + "</td>";
                            if(attributes["GPR"] != "Null" && attributes["GPR"] != "" && attributes["GPR"] != undefined && attributes["GPR"] != "null")
                            {
                            content += "<td>" + attributes["GPR"] + "</td>";                                           
                            }
                            else
                            {
                            content += "<td>N.A</td>";
                            }
                            content += "<td>" + attributes["SITE_AREA"] + "</td>";
                            content += "<td>" + attributes["ALLOWABLE_GFA"] + "</td>";
                            content += "<td>" + attributes["OFFICE_GFA"] + "</td>";
                            content += "<td>" + attributes["RETAIL_GFA"] + "</td>";
                            content += "<td>" + attributes["HOTEL_GFA"] + "</td>";
                            content += "</tr>"; 
                            useHeaderComm = true; 
                        }else
                        {                                                                     
                            content += "<tr>";
                            content += "<td><a href='javascript:void(0)' onclick='showFeature(\"" + resultsId + "\"," + j + ")'>" + attributes["LOCATION"] + "</a></td>";              
                            content += "<td>" + attributes["PLANNING_AREA"] + "</td>";
                            content += "<td>" + attributes["LAND_USE"] + "</td>";
                            if(attributes["GPR"] != "Null" && attributes["GPR"] != "" && attributes["GPR"] != undefined && attributes["GPR"] != "null")
                            {
                                content += "<td>" + attributes["GPR"] + "</td>";                                           
                            }
                            else
                            {
                                content += "<td>N.A</td>";
                            }
                                content += "<td>" + attributes["SITE_AREA"] + "</td>";
                            if(attributes["ESTIMATED_DU"] != "Null" && attributes["ESTIMATED_DU"] != "" && attributes["ESTIMATED_DU"] != undefined && attributes["ESTIMATED_DU"] != "null")
                            {
                                content += "<td>" + attributes["ESTIMATED_DU"] + "</td>";
                            }
                            else
                            {
                                content += "<td>N.A</td>";
                            }
                                content += "</tr>"; 
                                useHeaderComm = false; 
                        }
                    }
                    if(useHeaderComm == true)
                    {
                        $('.headerResi').hide();
                    }else
                    {
                        $('.headerComm').hide();
                    }

                }
                content += "</table>";
                break;
        }
    }
}

我要做的是遍历结果中的每个项目，并根据某些属性显示表头。

例如，如果LAND_USE为"COMM"或"OFF"，则使用的表格标题应为tr，其ID为headerComm。

但是，对于这些代码，标题只显示没有隐藏或显示。我想知道为什么会这样。

Answer 1

我认为您使用的是<tr>的ID，因此，您的代码应为

if(useHeaderComm == true)
{
    $('#headerResi').hide();
}
else
{
    $('#headerComm').hide();
}

还有一件事。您无需在此代码中添加另外两次<table>，

content += "<table><tr id='headerComm'><th>Location</th><th>Planning Area</th><th>Development Type</th><th>GPR</th><th>Site Area</th><th>Allowable GFA</th><th>Office GFA</th><th>Retail GFA</th><th>Other GFA</th></tr>";
content += "<table><tr id='headerResi'><th>Location</th><th>Planning Area</th><th>Development Type</th><th>GPR</th><th>Site Area</th><th>Estimated DU</th></tr>";

它应该是，

content += "<table><tr id='headerComm'><th>Location</th><th>Planning Area</th><th>Development Type</th><th>GPR</th><th>Site Area</th><th>Allowable GFA</th><th>Office GFA</th><th>Retail GFA</th><th>Other GFA</th></tr>";
content += "<tr id='headerResi'><th>Location</th><th>Planning Area</th><th>Development Type</th><th>GPR</th><th>Site Area</th><th>Estimated DU</th></tr>";

Answer 2

这是因为当您处理条件时，该元素不会附加到DOM。 jQuery只搜索DOM或创建的元素。

我建议在将其附加到DOM之后检查显示哪个1：

$(selector).append(content);
if(useHeaderComm == true)
{
    $('.headerResi').hide();
}else
{
    $('.headerComm').hide();
}

使用jQuery显示/隐藏表头

2 个答案: