Jqueryテーブルhtmlが正しく出力されない

以下のjQueryがAJAXリクエストの応答を取り込んでテーブルを作成していますが、その下に追加した後にそれぞれが起動するように見えます。それぞれが完了です。Jqueryテーブルhtmlが正しく出力されない

$.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>'); 
    } 
});

出力：あなたは間違ってappendメソッドを使用している

<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>

出典

2016-07-25 Zac Powell

。

あなたは公式ドキュメントで読むことができるため、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)に渡すことができます。 `each`が最後` append`前に実行を追加予想通り、@Zac に言及し

$.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); 

    } 
    });

出典

2016-07-25 10:38:57

1 .Just：下記のコードを確認してください。そしてなぜ 'append'を使うのが問題になったのですか？ドキュメントに挿入すると、ブラウザが完了していないときにブラウザがいくつかのタグを仮定するからです。 –

@ShekharPankajはい、そうです。ありがとう:) –

Jqueryテーブルhtmlが正しく出力されない

答えて

関連する問題