RAZOR MVCアプリケーションの別のjsファイルでJQueryを使用して、APPENDメソッドを使用して最初からhtmlテーブルを動的に構築しています。これは正常に機能しますが、ADDCLASSを使用すると、ページを更新するまでcssが適用されていないように見えます。時々まったくない!このコードは、30日のヘッダーセルと、その下に1つのセルが全体にまたがる別の行を持つ単純なテーブルです。cssも含めました。
$(document).ready(function () {
var startDate = $.telerik.formatString('{0:d}', $("#Start").data("tDatePicker").value());
var forCalendarStartDate = new Date(startDate);
$('#CalendarWrapper').append('<table id="Master"></table>');
$('#Master').append('<tr id="MasterDatesRow"></tr>');
for (var i = 0; i < 31; i++) {
var headerDate = new Date();
var d = new Date(headerDate.setDate(forCalendarStartDate.getDate() + i));
var s = $.datepicker.formatDate('mm-dd', d);
$('#MasterDatesRow').append('<th>' + s + '</th>');
}
$('#Master').append('<tr id="Header1"></tr>');
$('#HeaderUSARAF').append('<td colspan="31" id="HeaderCell">USARAF</td>');
//Class
$('#Master').addClass('CalendarTable');
$('#MasterDatesRow').addClass('DateHeader');
$('#HeaderCell').addClass('Header');
});
css
.CalendarTable
{
border:1;
width:100%;
font-size:small;
}
.DateHeader
{
background-color:Green;
}
.Header
{
background-color:#DBACBC;
text-align:center;
}