Заголовок таблицы не правильно отображается в jQuery?

Question

У меня есть вызов ajax, который возвращает некоторый массив объектов после того, как я отредактировал некоторые значения, и нажмите «Отправить» (эта форма в модальной форме, хотя я сомневаюсь, что она имеет какое-либо отношение к тому, что происходит). В случае успеха, я перехожу к $ .ajax() функции обратного вызова в атрибуте успеха, который выглядит следующим образом:

function updateTable(newArray){ 
    var tableBody = ""; 

    if (newArray) { 

     tableBody = 
       "<table>" + 
        "<thead>" + 
         "<tr>" + 
          "<th>Name</th>" + 
          "</tr>" + 
        "</thead>" + 
        "<tbody>"; 

     for (var i = 0; i < newArray.length; i++) { 
      tableBody = 
        "<tr>" + 
        "<td>" + newArray[i].name + "<td>" + 
        "</tr>"; 
     } 

     tableBody = tableBody + "</tbody></table>"; 
    } 

    $('#divTable').empty(); 
    $('#divTable').html(tableBody); 
} 

Скажем, нет ничего в элементе в самом начале. Я добавляю некоторое значение и добавляю newArray, и таблица добавляется, но браузер показывает только tbody, без заголовка, хотя я проверяю исходный код веб-сайта, и там написано. Почему это? Имеет ли он связь с заголовком таблицы рендеринга? Я не думаю, что это в рендеринге, потому что текст, который я назначаю одному тегу <p>, тоже не меняется, хотя он также включен в исходный код.

Я пробовал его также с .append() после .empty(), но без изменений.

Answer 1

Ваш for цикл не прилагается к tableBody, он заменяет его каждый раз. Вы должны использовать += вместо = в задании.

 for (var i = 0; i < newArray.length; i++) { 
      tableBody += 
        "<tr>" + 
        "<td>" + newArray[i].name + "<td>" + 
        "</tr>"; 
     }