2017-05-31 70 views
0

我有以下示例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工作正常。

不知道我上面丟失了什麼。

+0

[與jquery的onclick函數重寫自舉表條紋的行(的可能的複製https://stackoverflow.com/questions/43913955/overriding-bootstrap-table-striped-rows-with-jquery-onclick-功能) – Alexander

+0

我試圖在瀏覽器上使用你的規則,並看到它的工作。請參閱我的[以前的答案](https://stackoverflow.com/a/44044882/7914637)。 – Alexander

回答

0

好吧,我得到它在我的標記修改CSS如下雖然上述工作,我似乎明白爲什麼我認爲是第1列實際上是被當作第2列

這個版本的作品。

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