ребята, у меня есть некоторый AJAX-код, который запрашивает Календарь Google и отображает действия за текущий месяц через переменную списка результатов, которая называется myList.
Код работает нормально, но сейчас я пытаюсь заставить данные правильно отображаться в таблице.Однако HTML-код для вызова результатов из сценария ajax использует идентификатор внутри тега HTML DIV или P, который не отображается правильно в таблице, а находится сверху намеченной таблицы.(См. Снимок экрана) введите описание изображения здесь
Я подумал, что, поместив код вместе с идентификатором результатов вывода в тег DIV, он будет отображать результаты, включая открывающие и закрывающие тегидля ТР и ТД.Посмотрите:
<div class="container scroll">
<table class="table isSearch" cellspacing="0">
<thead>
<tr class="table-heads ">
<th class="head-item mbr-fonts-style display-7">
EVENT TITLE
</th>
<th class="head-item mbr-fonts-style display-7">
DATE & TIME
</th>
<th class="head-item mbr-fonts-style display-7">
DETAILS
</th>
</tr>
</thead>
<tbody>
<div id="myList"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//Jquery's ajax request
$.ajax({
type: 'GET',
url: '<% str_getDate %>',
dataType: 'json',
async: true
})
.done(function(data) {
//once we get a successful response this callback function
//gets fired, and "data" contains the parsed JSON file.
//here we iterate over the object array
$.each(data.items, function(i, item) {
//I do this to later format these timestamps
//set options for date.toLocaleDateString() function
var options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
let start = new Date(item.start.dateTime).toLocaleDateString('en-US', options);
let end = new Date(item.end.dateTime).toLocaleDateString('en-US', options);
let end_splt = end.split(',');
//append data to the list.
if (item.status != 'cancelled') {
$('#myList').append(`
<tr><td class='body-item mbr-fonts-style display-7'>${
item.summary
}</td><td class='body-item mbr-fonts-style display-7'>${start} - ${
end_splt[1]
}</td><td class='body-item mbr-fonts-style display-7'>${item.description}</td></tr>
`);
}
});
})
.fail(function(e) {
error(e);
});
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
</script>
</tbody>
</table>
</div>
Интересно, предоставленный вами код работал, однако иногда, когда страница загружается, данные таблицы находятся в контейнере Bootstrap таблицы, а иногда - нет.Вот ссылка на страницу.https://eaa309.club/calendar.asp
Всякий раз, когда таблица не загружалась в контейнере, первая строка указывает, что данные не отображаются.В других случаях, когда я обновляю страницу, она загружается правильно:
введите описание изображения здесь введите описание изображения здесь
Кстати, я пытался вставить свойкод, который он публикует, но это не так, поэтому я включил снимок экрана (YUCK) Извините
введите описание изображения здесь