jquery - 我如何使用 jQuery 隐藏或显示基于 asp.net Angular 色的表行？

Question

如何使用 jQuery 隐藏或显示基于 asp.net Angular 色的表格行？

也许我的做法不对，但我尝试搜索论坛，自己进行实验，并经历了整个循环的反复试验。 :)

这个问题是关于 asp.net 页面的，根据客户的要求，我已经成功地将 web.sitemap 文件显示为 html 表格。

鉴于我已经将用户的Active Directory组保存在一个隐藏字段中(在这个系统中用户必须属于一个组并且只能在一个组中)。

我现在需要做的是

1. 遍历表格中的每一行
2. 读取每个元素持有的“data-group”属性，可以是逗号分隔的字符串、单值字符串或“*”。
3. 如果在“数据组”属性中找到用户组，则相应地更改 css 类。 css 类——在此示例中，根据是否找到用户组将背景更改为黑色或绿色。

我已尝试使用 jQuery 进行此操作，但似乎卡住了。我一直在使用 jsFiddle 对我的代码进行故障排除。根据 jsFiddle，我的 jQuery 代码是有效的，但我没有看到我需要的行为。

我愿意打赌我会以一种非常简单的方式出错，但我错过了它。谁能看到我哪里出错了？

我正在按顺序粘贴我的 jQuery、CSS 和示例 HTML block 。 HTML 表格只是一个更大表格的子样本。这只是出于示例目的。

感谢您的任何见解。

jQuery block :

$(document).ready(function () {
    var strUser = $("#hfUserADGroup").val();
    var tblSitemap = $("#tblSitemap");
    var strGroup;

    tblSitemap.find("tr").each(function () {
        strGroup = $(this).data("roles");
        var arrGroup = strGroup.split(",");
        if (jQuery.isArray(strUser, arrGroup) == -1) {
            $(this).attr("class") = "HiddenObject";
        } else {
            $(this).attr("class") = "ShowObject";
        }
    });
});

CSS block :

.trow1 {
    font-weight: bold;
}

.level1 {
    margin-left: 0em;
}

.level2 {
 margin-left: 1em;
}

.trow2 {
    font-weight: bold;
}

.level3 {
    margin-left: 2em;
}

.trow3 {
    background-color: lightcoral;
}

.level4 {
margin-left: 3em;
}

.trow4 {
    font-weight: bold;
    background-color: #FAFAD2;
    font-weight: normal;
}

.level5 {
margin-left: 4em;
}

.HiddenObject {
background-color: black;
}

.ShowObject {
    background-color: green;
}

HTML block :

<input type="hidden" name="ctl00$ContentPlaceHolder1$hfUserADGroup" id="hfUserADGroup" value="ROSE\DM_RMG_Data_Manager" />
<table id="tblSitemap">
    <thead>
        <tr>
            <th style="border:thin solid gold;">Title</th>
            <th style="border:thin solid gold;">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr class="trow1" data-roles="*">
            <td style="border:thin solid gold;"> <span class="level1">Homepage</span>

            </td>
            <td style="border:thin solid gold;">Descriptive sitemap for all pages available through the ROSE network.</td>
        </tr>
        <tr class="trow2" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level2">Business</span>

        </td>
        <td style="border:thin solid gold;">Pages intended for use by the Business Department.</td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level3">Incident Report</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level4">Add/Edit Records</span>

        </td>
        <td style="border:thin solid gold;">Use this page to add or view new records.    </td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager,ROSE\DM_RMG_Clerk">
        <td style="border:thin solid gold;"> <span class="level4">View Records Before 8/14/2014</span>

        </td>
        <td style="border:thin solid gold;">This is a read-only table for historical searches.</td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager">
        <td style="border:thin solid gold;"> <span class="level3">Inventory</span>

        </td>
        <td style="border:thin solid gold;">Under development; not released yet.</td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_RMG_Business,ROSE\DM_RMG_Business_Manager">
        <td style="border:thin solid gold;"> <span class="level3">Marketing</span>

        </td>
        <td style="border:thin solid gold;">This view allows you to choose the campus of interest.</td>
    </tr>
    <tr class="trow2" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Teacher,ROSE\DM_CRA_Clerk,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist,ROSE\DM_RMG_SS_Clerk,ROSE\DM_RMG_SS_Manager">
        <td style="border:thin solid gold;"> <span class="level2">CRA</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk">
        <td style="border:thin solid gold;"> <span class="level3">Marketing</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk">
        <td style="border:thin solid gold;"> <span class="level3">Credit Slip Log</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist">
        <td style="border:thin solid gold;"> <span class="level3">Surveys</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist">
        <td style="border:thin solid gold;"> <span class="level4">SPED Parent Satisfaction</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow4" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Clerk">
        <td style="border:thin solid gold;"> <span class="level4">Student Enrollment</span>

        </td>
        <td style="border:thin solid gold;"></td>
    </tr>
    <tr class="trow3" data-roles="ROSE\DM_RMG_Data_Manager,ROSE\DM_RMG_Curriculum,ROSE\DM_RMG_OoS,ROSE\DM_CRA_Principal,ROSE\DM_CRA_Teacher,ROSE\DM_RMG_SPED_Director,ROSE\DM_RMG_SPED_Specialist,ROSE\DM_RMG_SS_Clerk,ROSE\DM_RMG_SS_Manager">
        <td style="border:thin solid gold;"> <span class="level3">MIA Goal Tracker</span>

        </td>
        <td style="border:thin solid gold;"></td>
        </tr>
    </tbody>
</table>

Answer 1

我做了一个更新的 fiddle 来完成我认为你想要做的事情:

http://jsfiddle.net/hwm5jjyu/

您的示例没有使用 strUser 变量来检查值是否在数组中。我将代码更新为 1) 检查 Angular 色属性是否存在，然后如果它确实使用 indexOf 检查结果数组中 strUser 的值。最后，您想使用 addClass jQuery 方法或在 vanilla JS 中使用 this.className = "new Class"来更改表行的类名。我不确定您希望“*”在示例中如何表现，所以我将其保留了下来，在此示例中，它会将行变为黑色，因为它与 strUsr 不匹配。

$(document).ready(function () {
    var strUser = $("#hfUserADGroup").val();
    var tblSitemap = $("#tblSitemap");
    var strGroup;

    tblSitemap.find("tr").each(function () {
        strGroup = $(this).data("roles");
        if(strGroup){
            var arrGroup = strGroup.split(",");
            if (arrGroup.indexOf(strUser) == -1) {
                $(this).addClass("HiddenObject");
            } else {
                $(this).addClass("ShowObject");
            }
        }
    });
});