我让下面的jQuery接收来自AJAX请求的响应,以建立一个表,但是每个表似乎都在其下面的追加之后被触发,我如何确保在每个表完成之前不关闭表。

$.ajax({
    type: "POST",
    url: "api/getFirmTabletsDetails.php",
    data: "id=" + firmID,
    cache: false,
    dataType: "json",
    success: function(result)
    {
        var tabletArea = modal.find('#tablet-body');
        tabletArea.html("");
        tabletArea.append
        (
            '<div class="col-lg-12">
             <table class="table table-hover table-striped"><thead>
             <tr><th>Name</th><th>Status</th><th>Address</th></tr>
             </thead><tbody>'
        );
        if (result.success = 1)
        {
            $.each(result.request, function( index, value )
            {
                var address = value.Street + "<br>" + value.Street2 + "<br>"
                              + value.Town + "<br>" + value.County +  "<br>"
                              + value.Postcode;
                tabletArea.append('<tr><td>'+value.Name+
                '</td><td>'+value.Status+'</td><td>'+address+'</td></tr>');
            });
        }else{
            alert(result.error);
        }
        tabletArea.append('</tbody></table></div></div>');
    }
});


输出:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="modal-body" id="tablet-body">
      <div class="col-lg-12">
        <table class="table table-hover table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Status</th>
              <th>Address</th>
            </tr>
          </thead>
        </table>
      </div>
      <table>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...
          <br />...
          <br />...
          <br />...
          <br />...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...
          <br />...
          <br />...
          <br />...
          <br />...</td>
        </tr>
      </table>
    </div>
  </body>
</html>

最佳答案

您使用的append方法不正确。


正如您在官方文档中可以看到的,append( content )带有一个可以为DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.的参数。您在这里所做的是重复传递字符串。您应该为要附加的元素传递完整的htmlString。如果您想采用与您正在执行的操作类似的方法,则可以保留字符串并继续向其中添加元素。完成后,可以一次将字符串传递给您的append(content)方法。检查下面给出的代码:

$.ajax({
    type: "POST",
    url: "api/getFirmTabletsDetails.php",
    data: "id=" + firmID,
    cache: false,
    dataType: "json",
    success: function(result){
        var tabletArea = modal.find('#tablet-body');
        tabletArea.html("");
        var htmlString = "";
        htmlString += '<div class="col-lg-12"><table class="table table-hover table-striped"><thead><tr><th>Name</th><th>Status</th><th>Address</th></tr></thead><tbody>';
        if (result.success = 1){
            $.each(result.request, function( index, value ) {

            var address = value.Street + "<br>" + value.Street2 + "<br>" + value.Town + "<br>" + value.County + "<br>" + value.Postcode;

            htmlString += '<tr><td>'+value.Name+'</td><td>'+value.Status+'</td><td>'+address+'</td></tr>';

            });
        }else{
            alert(result.error);
        }
        htmlString += '</tbody></table></div></div>';

        tabletArea.append( htmlString );

    }
    });

关于javascript - jQuery table HTML输出不正确,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38565465/

10-12 12:43
查看更多