JQuery遍历webgrid行并更改标签backcolor

时间:2015-08-05 20:33:27

标签: jquery

我正在编写一个WebGrid,每个列都有标签。对于列,PREV STAT MISSION,STAT MISSION,PREV STAT QUAL和STAT QUAL,有1到4的值。我想更改标签的背景颜色以显示以下1:绿色2:黄色,3:红色和4:黑色。

如何编写一个JQuery函数,该函数将遍历webgrid中的每一行,该行将检查PREV STAT MISSION,STAT MISSION,PREV STAT QUAL和STAT QUAL的值并更改标签backcolor?

谢谢,非常感谢。

<div id="gvFacilities">
    @{
        var grid = new WebGrid(Model, canPage: true, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");

        <div id="gridContent">
            @grid.GetHtml(
            htmlAttributes: new { id = "gvFacilities" },
            tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
                grid.Column("SITE_UID", format: @<text> <span class="display-mode"></span><label id="lblSiteUID" class="edit-mode">@item.SITE_UID</label></text>, style: "color:blue"),
                grid.Column("FACNO", format: @<text> <span class="display-mode"><label id="lblFacNo" class="edit-mode">@item.FACNO</label></span></text>),
                grid.Column("CATCODE", format: @<text> <span class="display-mode"><label id="lblCatCode" class="edit-mode">@item.CATCODE</label></span></text>),
                grid.Column("UIC", format: @<text> <span class="display-mode"><label id="lblUIC" class="edit-mode">@item.UIC</label></span></text>),
                grid.Column("PREV_STAT_MISSION", format: @<text> <span class="display-mode"><label id="lblPrevStatMission" class="edit-mode"> @(item.PREV_STAT_MISSION == 1 ? " F1 " : item.PREV_STAT_MISSION == 2 ? "  F2 " : item.PREV_STAT_MISSION == 3 ? " F3 " : item.PREV_STAT_MISSION == 4 ? " F4 " : item.PREV_STAT_MISSION == 5 ? " F5 " : "")</label></span></text>),
                grid.Column("STAT_MISSION", format: @<text><span class="display-mode"><label id="lblStatMission" class="edit-mode">@(item.STAT_MISSION == 1 ? "F1" : item.STAT_MISSION == 2 ? "F2" : item.STAT_MISSION == 3 ? "F3" : item.STAT_MISSION == 4 ? "F4" : item.STAT_MISSION == 5 ? "F5" : "")</label></span></text>),
                grid.Column("PREV_STAT_QUAL", format: @<text><span class="display-mode"><label id="lblPrevStatQual" class="edit-mode">@(item.PREV_STAT_QUAL == 1 ? "Q1" : item.PREV_STAT_QUAL == 2 ? "Q2" : item.PREV_STAT_QUAL == 3 ? "Q3" : item.PREV_STAT_QUAL == 4 ? "Q4" : item.PREV_STAT_QUAL == 5 ? "Q5" : "")</label></span></text>),
                grid.Column("STAT_QUAL", format: @<text><span class="display-mode"><label id="lblStatQual" class="edit-mode">@(item.STAT_QUAL == 1 ? "Q1" : item.PREV_STAT_QUAL == 2 ? "Q2" : item.PREV_STAT_QUAL == 3 ? "Q3" : item.PREV_STAT_QUAL == 4 ? "Q4" : item.PREV_STAT_QUAL == 5 ? "Q5" : "")</label></span> </text>),
                grid.Column("CYRATING", format: @<text><span class="display-mode"><label id="lblCYRating" class="edit-mode">@(item.CYRATING != null ? item.CYRATING : "")</label></span></text>),
                grid.Column("CONSTR_TYPE", format: @<text><span class="display-mode"><label id="lblType" class="edit-mode">@(item.CONSTR_TYPE != null ? item.CONSTR_TYPE : "")</label></span> </text>),    
                grid.Column("ASSET_UID", format: @<text><span class="display-mode"><label id="lblAssetUID" class="edit-mode">@(item.ASSET_UID != null ? item.ASSET_UID : "")</label></span></text>),
                grid.Column("RATINGDUE", format: @<text><span class="display-mode"><label id="lblRatingDue" class="edit-mode">@(item.RATINGDUE != null ? item.RATINGDUE : "")</label></span></text>),
                grid.Column("AMOUNT", format: @<text><span class="display-mode"><label id="lblAmount" class="edit-mode">@(item.AMOUNT != null ? item.AMOUNT : "")</label></span></text>),    
                grid.Column("CATCODE_UM", format: @<text><span class="display-mode"><label id="lblCatcodeUM" class="edit-mode">@(item.CATCODE_UM != null ? item.CATCODE_UM : "")</label></span></text>),
                grid.Column("UIC", format: @<text><span class="display-mode"><label id="lblUIC" class="edit-mode">@(item.UIC != null ? item.UIC : "")</label></span></text>)

               ))
        </div>
    }
</div>

0 个答案:

没有答案