#jquery #ajax #append #html-table #head
#jquery #ajax #добавить #html-таблица #заголовок
Вопрос:
Итак, я пытаюсь добавить данные из URL-адреса в заголовок таблицы. Данные, вызываемые из URL, представляют собой список строк. Итак, как вы можете видеть, я пытаюсь просмотреть каждое значение в списке, а затем добавить его в заголовок моей таблицы «данные». Но когда я запускаю код, ничего не добавляется. Я знаю, что данные поступают, потому что в окне оповещения отображается каждая из строк.
jQuery:
$(document).ready(function () {
$.ajax({
url: 'http://..../api/Dynamic?table=table1',
dataType: 'Json',
success: function (tableResults) {
var count = 0;
$.each(tableResults, function () {
window.alert(this);
$('#data th:last-child').append('<th><a id="count">' this '</a></th>');
count ;
});
}
});
});
HTML:
<table id="data" border="1" align="center" width="95%">
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
Есть предложения?
Комментарии:
1. вы … добавили th к th. это не имеет смысла.
Ответ №1:
Если tableResults представляет собой массив строк, вы можете напрямую использовать параметры each и избегать переменной count, как в следующем фрагменте (используйте after вместо append, потому что новые элементы th должны следовать и не быть дочерними по отношению к последнему th):
//
// if thead does not exist
//
if ($('#data thead').length == 0) {
$('#data').append($('<thead/>'));
}
$.each(['email', 'address', 'country'], function (index, value) {
if ($('#data th:last-child').length == 0) {
//
// if there are no th
//
$('#data thead').append('<th><a id="count' index '"</a>' value '</th>');
} else {
$('#data th:last-child').after('<th><a id="count' index '"</a>' value '</th>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data" border="1" align="center" width="95%">
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
Комментарии:
1. Что делать, если заголовок таблицы пуст?
2. Да, это похоже на ваш массив, и я не получаю сообщение об ошибке
3. @JacksonSentzke Работает ли мой фрагмент? Я обновил его. Не могли бы вы протестировать еще раз и дать мне знать? Спасибо
4. Я думаю
$('#data thead tr').append(...)
, этого будет достаточно, чтобы охватить оба случая (независимо от того, пусто или нетthead
), нет необходимости вif
заявлении.5. @Артур Филипяк, вы правы. Проблема связана с комментарием: если thead или th не завершаются, как я могу их создать? Я понимаю вашу точку зрения, но мой ответ был основан на том, как вы можете создать элемент, если он не существует. Глядя на вопрос и ответ, теперь это явно избыточно…. В любом случае большое вам спасибо.