title: Apply dynamic styling to datatables rows
body: <p>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 <code>&lt;tr&gt;</code> with an <code>id</code> 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. </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/*
   * 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;
  }
  </code></pre>
  
  <p><strong>HTML (Rendered)</strong></p>
  
  <pre><code>&lt;tr id=Inactive style="vertical-align:top;"&gt;
      &lt;td style="width:200px;"&gt;
          Name
      &lt;/td&gt;
      &lt;td&gt;
              &lt;a href="http://insideapps.dev.com/periscope/Pages/Dist.aspx?statProducer=03432402" class="noLine" target="_blank"&gt;Fixed&lt;/a&gt;               
      &lt;/td&gt;
      &lt;td style="width:50px;"&gt;
                      test
          who&amp;#39;s testing
          I am
          who&amp;#39;s that eh?
          me
      &lt;/td&gt;
      &lt;td style="width:50px;"&gt;
          109161
      &lt;/td&gt;
      &lt;td style="text-align:center"&gt;
              &lt;a href=\\Prdhilfs03\l&amp;amp;i-sales class="noLine"&gt;&lt;img src="/Content/Images/attachment.png" height="20px;" width="20px;"/&gt;&lt;/a&gt;
  
      &lt;/td&gt;
      &lt;td nowrap&gt;
  
      &lt;/td&gt;
      &lt;td nowrap&gt;
      &lt;/td&gt;
      &lt;td style="text-align:center; max-width: 50px;"&gt;
      &lt;/td&gt;
      &lt;td&gt; 
              &lt;a href="/BankListMaster/Edit/1"&gt;&lt;img src="/Content/Images/Pencil-icon.png" alt="edit" height="20px;" width="20px;"/&gt;&lt;/a&gt;&lt;br /&gt;                
  
          &lt;a href="/BankListMaster/Details/1"&gt;&lt;img src="/Content/Images/Actions-view-list-text-icon.png" alt="details" height="20px;" width="20px;"/&gt;&lt;/a&gt;&lt;br /&gt;
  
              &lt;a href="/BankListMaster/Delete/1"&gt;&lt;img src="/Content/Images/Actions-edit-delete-icon.png" alt="delete" height="20px;" width="20px;"/&gt;&lt;/a&gt;                
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>        $("#thetable").dataTable({
              "sPaginationType": "full_numbers",
              "iDisplayLength": 100,
              "oLanguage": {
                  "sSearch": "Filter results:"
              }
          });
  </code></pre>