HTML таблица не создается в AJAX

Question

как сконцентрировать строки, чтобы сформировать правильную HTML-таблицу в ajax. tr и td формируются нормально, но проблема с таблицей.

$.ajax(
        {
            cache: false,
            type: "GET",
            url: hosturl,
            success: function (e)
            {
               $("#t1").append("<table>");
               $("#t1").append("<tr> <th> Book Name </th> <th> Publisher Name </th> <th> Publish Year </th> </tr>");

                for (var j = 0; j < 10; j++)
                { 

                    $("#t1").append("<tr>" + "<td>" + e[j].bookName + "</td>" + "<td>" + e[j].publisherName + "</td>" + "<td>" + e[j].publishYear + "</td>" + "</tr>");
                }
                $("#t1").append("<table>");
            },
  <div> Book DETAILS :</div> <br>
  <div id="t1">  </div>

Answer 1

Нельзя добавить частичный элемент в dom, то есть начало таблицы, а затем ее конец.
Простое решение вашей проблемы - сначала создать строку таблицы HTML, а затем добавить ее.

        success: function (e)
        {
           var table = "<table>";
           table += "<tr> <th> Book Name </th> <th> Publisher Name </th> <th> Publish Year </th> </tr>";

            for (var j = 0; j < 10; j++)
            { 

                table += "<tr>" + "<td>" + e[j].bookName + "</td>" + "<td>" + e[j].publisherName + "</td>" + "<td>" + e[j].publishYear + "</td>" + "</tr>";
            }
            table += "</table>";
            $("#t1").append(table);
         },

Answer 2

Сначала вы можете добавить элемент table к t1, затем вы можете добавить tr к таблице напрямую.

Таким образом, в вашей функции success измените значение на:

$("#t1").append("<table><tr> <th> Book Name </th> <th> Publisher Name </th> <th> Publish Year </th> </tr></table>"); 
for (var j = 0; j < 10; j++)
{ 
    $("#t1>table").append("<tr>" + "<td>" + e[j].bookName + "</td>" 
         + "<td>" + e[j].publisherName + "</td>" 
         + "<td>" + e[j].publishYear + "</td>" + "</tr>");
}