Question

如何将字符串括起来以在ajax中形成适当的html表。 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

首先，您可以将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>");
}

Answer 2

您不能将部分元素附加到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);
         },

HTML表格未在AJAX中形成

2 个答案: