使用 jQuery 显示/隐藏表头

Show/Hide table header using jQuery

本文关键字：隐藏 表头 显示 jQuery 使用      更新时间：2023-09-26

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

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"则使用的表头应使用 headerComm 的 id tr。

但是，对于这些代码，两个标题都只是显示而不隐藏或显示。我想知道为什么会这样。

我认为你正在使用id作为你的<tr>所以，你的代码应该是，

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>";

这是因为当你做你的条件时，元素不会附加到 DOM 中。 jQuery 仅在 DOM 或创建的元素上进行搜索。

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

$(selector).append(content);
if(useHeaderComm == true)
{
    $('.headerResi').hide();
}else
{
    $('.headerComm').hide();
}
相关文章：