jQuery $ .eachまたは$ .mapを追加して<tr>を動的に追加する

Question

jQuery AJAXレスポンスを使用して、パネル内にブートストラップテーブルを動的に作成しています。

パネルを作成してパネルをパネルに追加することができますが、AJAXレスポンスでループしてテーブルの行とセルを作成する際に問題が発生しました。

$.ajax({ 
    ... 
    ... 
    ... 
    ... 
    success: function(response) { 
     $('#groups').append(
      $('<div/>', {'class': 'panel panel-default'}).append(
       $('<div/>', {'class': 'panel-heading'}).append(
        $('<span/>', {text: 'TEST'}) 
       ) 
      ).append(
       $('<div/>', {'class': 'panel-body'}).append(
        $('<div/>', {class: 'table-responsive'}).append(
         $('<table/>', {class: 'table table-bordered'}).append(

         ) 
        ) 
       ) 
      ) 
     ); 
    } 
}); 

予想される出力は次のようになります。

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     TEST 
    </div> 
    <div class="panel-body"> 
     <div class="table-responsive"> 
      <table class="table"> 
       <tr> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

が、私はこれを取得現時点で：

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     TEST 
    </div> 
    <div class="panel-body"> 
     <div class="table-responsive"> 
      <table class="table"> 

      </table> 
     </div> 
    </div> 
</div> 

はどのように行ごとの<tr>を作成するために、応答を通じてIループですか？

Answer 1

試してみる

$('#groups').append(
      $('<div/>', {'class': 'panel panel-default'}).append(
       $('<div/>', {'class': 'panel-heading'}).append(
        $('<span/>', {text: $('#productgroup option:selected').text() + '/' + $('#productline option:selected').text() + '/' + $('#producttype option:selected').text()}) 
       ) 
      ).append(
       $('<div/>', {'class': 'panel-body'}).append(
        $('<div/>', {class: 'table-responsive'}).append(
         $('<table/>', {class: 'table table-bordered table-striped'}).append(
          $.map(response, function (k, v) { 
           return $('<tr/>').append(
            $('<td>', {text: 'some text'}) 
           ).append(
            $('<td>', {text: 'some more text'}) 
           ); 
          }) 
         ) 
        ) 
       ) 
      ) 
     );