为动态添加的偶数行更改html表背景色

我有以下示例html表定义。为动态添加的偶数行更改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工作正常。

不知道我上面丢失了什么。

来源

2017-05-31 StackTrace

[与jquery的onclick函数重写自举表条纹的行（的可能的复制https://stackoverflow.com/questions/43913955/overriding-bootstrap-table-striped-rows-with-jquery-onclick-功能） – Alexander

我试图在浏览器上使用你的规则，并看到它的工作。请参阅我的[以前的答案]（https://stackoverflow.com/a/44044882/7914637）。 – Alexander

好吧，我得到它在我的标记修改CSS如下虽然上述工作，我似乎明白为什么我认为是第1列实际上是被当作第2列

这个版本的作品。

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

来源

2017-05-31 12:52:44 StackTrace

为动态添加的偶数行更改html表背景色

回答

相关问题