jQuery: добавить в заголовок таблицы

#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 не завершаются, как я могу их создать? Я понимаю вашу точку зрения, но мой ответ был основан на том, как вы можете создать элемент, если он не существует. Глядя на вопрос и ответ, теперь это явно избыточно…. В любом случае большое вам спасибо.