0

Мне нужно выделить строку в таблице данных DataTables.js всякий раз, когда она неактивна. У меня есть код, установленный в моей Razor, чтобы пометить <tr>id «Неактивный», и в моем CSS у меня установлен цвет фона. Тем не менее, я не могу получить ничего, кроме стиля оформления orignal.Применить динамический стиль к строкам datatables

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 (визуализации)

<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:" 
      } 
     }); 
+0

Только один неактивен одновременно? – jameslafferty

ответ

1

Если только одна строка АКТИВНО в то время, я думаю, вы ищете:

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

несколько строк могут быть неактивными одновременно – NealR

+0

Это сработало отлично, спасибо за помощь! – NealR

+0

Для нескольких неактивных строк вам необходимо применить класс к неактивным строкам вместо идентификатора и соответственно обновить css. Возможно, вам понадобится использовать более конкретный селектор (например, '' 'tt tr.inactive td''', чтобы он отображался правильно. Только одному элементу разрешено иметь заданный идентификатор на странице. – jameslafferty

Смежные вопросы