Question

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

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

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

我的HTML - DataTable代码：

＆＃13;

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

＆＃13;

我的CSS：

＆＃13;

<style>
    .Saved {
        background-color: #ADD7F2;
    }

    .InProgress {
        background-color: #F1EA55;
    }

    .Cancelled {
        background-color: #F93A07;
    }

    .Completed {
        background-color: #CDEA6A;
    }
</style>

＆＃13;

结果：

enter image description here

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>

从模型动态设置HTML Div类名

1 个答案: