使用jQuery顯示/隱藏表頭

Question

遍歷每個項目時，基本上基於表的內容，我有兩種不同類型的標題：

JS代碼：

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"則使用的表頭應該是id為headerComm tr 。

但是，對於這些代碼，兩個標題都只是顯示而沒有隱藏或顯示。 我不知道為什么會這樣。

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