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工作正常。
不知道我上面丟失了什麼。
[與jquery的onclick函數重寫自舉表條紋的行(的可能的複製https://stackoverflow.com/questions/43913955/overriding-bootstrap-table-striped-rows-with-jquery-onclick-功能) – Alexander
我試圖在瀏覽器上使用你的規則,並看到它的工作。請參閱我的[以前的答案](https://stackoverflow.com/a/44044882/7914637)。 – Alexander