从模型中动态设置 HTML div 类名称

Question

我正在尝试从数据表中的模型动态更改我的表行类名称，以根据我的状态突出显示具有不同颜色的行。

我的代码正在运行，并且正在设置类名。但是表格行的 css 样式仅适用于奇数行。

我想根据我的模型 - OverAllStatus 结果将 css 样式应用于我的所有行。我还检查了列表中的所有行 - Model.InvoiceDetailsList 的所有状态。而且，对于所有这些整体状态结果，我有 css 风格。

我的 HTML - DataTable 代码：

<table id="tblDashBoardInvoices" class="table table-striped table-bordered" style="max-width: 100%">

    <thead>
        <tr style="background-color: #222222; color: white; font-size: small; align-content: center">
            <th>VPL ID</th>
            <th>From</th>
            <th>To</th>
            <th>Po Number</th>
            <th>Po Qty</th>
            <th>Invoice Number</th>
            <th>Invoice Qty</th>
            <th>Invoice Amount</th>
            <th>Currency</th>
            <th>Invoice Date</th>
            <th>Packingslip Number</th>
            <th>Payment Term</th>
            <th>Invoice File Name</th>
            <th>System File Name</th>
            <th>Shipment Date</th>
            <th>AP ID</th>
            <th>AP Status</th>
            <th>Traffic ID</th>
            <th>Traffic Status</th>
            <th>Wear House Status</th>
            <th>Overall Status</th>
            <th>By</th>
            <th>Edit</th>
        </tr>

    </thead>
    <tbody>
        @foreach (var row in Model.InvoiceDetailsList)
        {
            <tr class="@row.OverAllStatus">
                <td>@row.VplTransID</td>
                <td>@row.SubmittedBy</td>
                <td>@row.SubmittedTo</td>
                <td>@row.PoNumber</td>
                <td>@row.PoQty</td>
                <td>@row.InvoiceNumber</td>
                <td>@row.InvoiceQty</td>
                <td>@row.InvoiceAmount</td>
                <td>@row.InvoiceCurrency</td>
                <td>@row.InvoiceDate</td>
                <td>@row.TrackingId</td>
                <td>@row.PaymentTerm</td>
                <td>@row.SuppFileName</td>
                <td>@row.SysFileName</td>
                <td>@row.ShipmentDate</td>
                <td>@row.ApTransactionId</td>
                <td>@row.ApStatus</td>
                <td>@row.TrafficTransactionId</td>
                <td>@row.TrafficStatus</td>
                <td>@row.WhStatus</td>
                <td>@row.OverAllStatus</td>
                <td>@row.UserName</td>
                <td><a id="btnEdit" href="#" onclick="btnEditClick(@row.KeyId,'@row.VplTransID @row.ApTransactionId @row.TrafficTransactionId')"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a></td>
            </tr>
        }
    </tbody>
</table>

我的 CSS：

<style>
    .Saved {
        background-color: #ADD7F2;
    }

    .InProgress {
        background-color: #F1EA55;
    }

    .Cancelled {
        background-color: #F93A07;
    }

    .Completed {
        background-color: #CDEA6A;
    }
</style>

结果：

Answer 1

我认为您的代码适用于所有行，但另一个 css 样式定义正在覆盖背景颜色（使用浏览器工具检查元素并查看正在应用哪些 css 类）。所以请确保你的覆盖其他所有内容。

您可以使用!IMPORTANT; 这样做。

<style>
    .Saved {
        background-color: #ADD7F2 !IMPORTANT;
    }

    .InProgress {
        background-color: #F1EA55 !IMPORTANT;
    }

    .Cancelled {
        background-color: #F93A07 !IMPORTANT;
    }

    .Completed {
        background-color: #CDEA6A !IMPORTANT; 
    }
</style>