tdの背景色をdataTableの灰色の行のみで変更することはできません

Question

私はdataTableを持っていて、テーブルの1つの列にブール値を表示しています。このブール値に応じてtdの背景色を変更したい。真であれば緑、偽であれば赤です。ここに私のhtmlがあります。

<table id="myTable" class="table table-striped m-b-none" data-ride="datatables"> 
         <thead> 
          <tr> 
           <th>Food</th> 
           <th>Edible</th> 
          </tr> 
         </thead> 
         <tbody> 
          @foreach (var item in Model) 
          {<tr>           
            <td>@item.FoodName</td> 
            <td class="@String.Format("alert {0}", ((item.IsEdible) ? "alert-success" : "alert-danger"))">@(item.IsEdible? "Edible" : "Not Edible")</td>           
           </tr>} 
         </tbody> 
        </table> 

only white rows are affected

そして、ここでJSです：

$('#myTable').dataTable({    

      "bProcessing": true, 
      "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",    
      "iDisplayLength": 10, 
      "sPaginationType": "full_numbers", 

      } 

表のストライプCSS：

.table-striped > tbody > tr:nth-child(odd) > td, 
.table-striped > tbody > tr:nth-child(odd) > th { 
    background-color: #f9f9f9; 
} 

はグレー行の内側にあるTDのクラスを変更することはできませんデータ表。私はdataTableのBaseStyleでダイビングする必要があると思いますが、それをどのように行うのか把握できませんでした。どんな助け？ table-stripedクラスに適用なっているものは何でもCSSルール

がalert-successとalert-dangerクラスに優先を取っている：

あなたはあなたの質問であなたのCSSルールを含めていないので

Answer 1

が、これは推測です。

CSSルールの順番（ファイルの下のルールは以前のルールよりも優先されます）、またはtable-stripedクラスを使用するルールは、より多くのspecificルールになります。

.table-striped > tbody > tr:nth-child(odd) > td.alert-success, 
.table-striped > tbody > tr:nth-child(odd) > th.alert-success { 
     background-color: green; 
} 

.table-striped > tbody > tr:nth-child(odd) > td.alert-danger, 
.table-striped > tbody > tr:nth-child(odd) > th.alert-danger{ 
     background-color: red; 
} 

がbackground-colorが適切なalertのクラスからは何でもして​​とredの交換：あなたは自分の質問に追加されたルールを考える

、あなたはストライプの行をカバーするために、以下のルールを追加することができます。

Answer 2

あなたのCSSリストの最後にカスタムCSSファイルを読み込みます。そのファイルにalert-successまたはalert-dangerのカスタムCSSを追加します。これはクラスルールtable-strippedよりも優先されます。あなたはこれを呼び出し、データにデータの変更に応じて基礎を更新できるようにこれを行うには

Answer 3

は、駆動JS：

$("#myTable td").each(function(){ 
if($(this).text()==true){ 

     $(this).css('background-color','#090'); 
    }else{ 
    $(this).css('background-color','#900'); 
} 
}) 

Answer 4

、あなたのテーブルにテーブルストライプクラスが含まれている場合、この問題が発生します。私のソリューションによれば、このクラスを使用しないで、あなたが望むように動作します。