更改动态添加的偶数行的 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

好的，我通过如下修改 CSS 使其工作，尽管在我上面的标记中，我似乎无法理解为什么我认为是第 1 列实际上被视为第 2 列。

此版本有效。

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