CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcdatatables
NealR
NealR

Reputation: 10689

Apply dynamic styling to datatables rows

I need to highlight a row in a DataTables.js data table whenever it is inactive. I have some code set up in my Razor to label the <tr> with an id of "Inactive" and in my CSS I have the background color set accordingly. However, I can't get anything but the orignal styling to appear.

CSS

/*
 * Table styles
 */
table.pretty {
    width: 100%;
    clear: both;
}

table.pretty td#Inactive {
    padding: 5px;
    border: 1px solid #fff;
    background-color: #FB9090;
}

table.pretty td,
table.pretty th {
    padding: 5px;
    border: 1px solid #fff;
}

/* Header cells */
table.pretty thead th {
    background: #6699FF; /* #66a9bd; */
    color: white;
}

/* Body cells */
table.pretty tbody th {
    text-align: left;
    background: black;   /*#91c5d4; */
    color: white;
}

table.pretty tbody td {
    background: white; /* #d5eaf0; */
}

table.pretty tbody tr.odd td { 
    background: #e8eef4;  /*#bcd9e1; */
}

/* Footer cells */  
table.pretty tfoot th {
    background: #b0cc7f;
    text-align: left;
}

table.pretty tfoot td {
    background: #d7e1c5;
    text-align: center;
    font-weight: bold;
}

tr#Inactive
{
    background-color: #FB9090;
}

HTML (Rendered)

<tr id=Inactive style="vertical-align:top;">
    <td style="width:200px;">
        Name
    </td>
    <td>
            <a href="http://insideapps.dev.com/periscope/Pages/Dist.aspx?statProducer=03432402" class="noLine" target="_blank">Fixed</a>               
    </td>
    <td style="width:50px;">
                    test
        who&#39;s testing
        I am
        who&#39;s that eh?
        me
    </td>
    <td style="width:50px;">
        109161
    </td>
    <td style="text-align:center">
            <a href=\\Prdhilfs03\l&amp;i-sales class="noLine"><img src="/Content/Images/attachment.png" height="20px;" width="20px;"/></a>

    </td>
    <td nowrap>

    </td>
    <td nowrap>
    </td>
    <td style="text-align:center; max-width: 50px;">
    </td>
    <td> 
            <a href="/BankListMaster/Edit/1"><img src="/Content/Images/Pencil-icon.png" alt="edit" height="20px;" width="20px;"/></a><br />                

        <a href="/BankListMaster/Details/1"><img src="/Content/Images/Actions-view-list-text-icon.png" alt="details" height="20px;" width="20px;"/></a><br />

            <a href="/BankListMaster/Delete/1"><img src="/Content/Images/Actions-edit-delete-icon.png" alt="delete" height="20px;" width="20px;"/></a>                
    </td>
</tr>

jQuery

        $("#thetable").dataTable({
            "sPaginationType": "full_numbers",
            "iDisplayLength": 100,
            "oLanguage": {
                "sSearch": "Filter results:"
            }
        });

Upvotes: 0

Views: 1740

Answers (1)

jameslafferty
jameslafferty

Reputation: 2182

If only one row is inactive at a time, I think you're looking for:

tr#Inactive td
{
    background-color: #FB9090;
}

Upvotes: 1

Related Questions