動的に追加された偶数行のhtmlテーブルの背景色を変更する

Question

私は以下のhtmlテーブル定義のサンプルを持っています。

<table id="myDynamicTable" class="table-striped" > 
      <thead class="ui-widget-header_custom dataTables_wrapper no-footer"> 
      <tr id="uploadrow_0" class=""> 
       <th style="white-space: nowrap;display: table-cell;width: 2px; text-align: center " class="text-left" > 
        Row# 
       </th> 
        <th style="white-space: nowrap;display: table-cell;text-align: center " class="text-left msr_d_col_widths_nationality"> 
        Nationality 
       </th> 
       <th style="white-space: nowrap;display: table-cell; text-align: center " class="text-left"> 
        No of Visitors 
       </th> 
       <th style="white-space: nowrap;display: table-cell;text-align: center " class="text-left msr_d_col_widths_remark"> 
        Remarks 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
         @if (Model.VisitDetails.Any()) 
         { 
          foreach (var item in Model.VisitDetails) 
          { 
           @Html.Partial("VisitDetailsPartial", item); 
          } 
         } 
         else 
         { 
          item.RowId = 1; 
          item.NationalityList = ViewBag.NationalityList; 
          @Html.Partial("VisitDetailsPartial", item); 
         } 
     </tbody> 
    </table> 

ボタンをクリックすると、asp.net MVCの部分ビューで定義されている行がテーブルに追加されます。

ボタン「レポート」コントロールでアクションを「追加」

$(document).ready(function() { 
     var tableBody = $('#myDynamicTableDiseases tbody'); 
     var url = '@Url.Action("Add", "Report")'; 
     $('.btnAddRow').click(function() { 
      $.get(url, function (response) { 
       tableBody.append(response); 
       $('#myDynamicTableDiseases tbody tr').each(function (idx) { 
        $(this).children("td:eq(0)").html(idx + 1); 
       }); 
      }); 
     }); 
    }); 

をクリックして新しい行をテーブルに追加として「VisitDetailsPartial」を返します。

下記はVisitDetailsPartialの定義です。

@model SolutionName.ViewModel.VisitDetailsViewModel 
<tr class=""> 
    @using (Html.BeginCollectionItem("item")) 
    { 
     <td class="autoGenNumber" style="width: 5px" > 
       @if (Model == null) 
      { 
       var item = new VisitDetailsViewModel 
       { 
        NationalityList = ViewBag.NationalityList, 
       }; 
       @Html.LabelFor(x => item.RowId, item.RowId.ToString(), new { style = "", @class = "autoGenNumber" }) 
      } 
      else 
      { 
       @Html.LabelFor(x => Model.RowId, Model.RowId.ToString(), new { style = "", @class = "autoGenNumber" }) 
      } 
     </td> 
      <td class=""> 
      @Html.DropDownListFor(model => model.NationalityId, new SelectList(Model.NationalityList, "Value", "Text", Model.NationalityId), "Select", new { @id = "ddlNationalityList" }) 
     </td> 
     <td class=""> 
      @Html.TextBox("txtNumberOfVisits", Model.NumberOfVisits, new { id = "txtNumberOfVisits"})  
     </td> 
     <td class=""> 
      @Html.TextBoxFor(x => Model.Remarks, new { id = "txtRemarks", Multiline = true}) 
     </td> 
    } 
</tr> 

私は動的に追加もテーブルの行の最初の列の背景色を変更するには、以下のCSSを使用しようとしているが、CSSが適用されていません。

.table-striped > tbody > tr:nth-of-type(even) td:first-child { 
    background-color: #e0f0ff; 

}

私はその行の部分図から来ていないされている内のテーブルに同じを適用する場合は、CSSが正常に動作します。

私は上記の内容が不明です。

Answer 1

[OK]を、私は上記の私のマークアップでは、以下のようにかかわらず、CSSを変更することで、作業それを得た私は、カラム1は、実際の列このバージョンでは動作します2.

として扱われていることを考える理由を、私は見ているようだ傾けます。