テーブルの行が別の行にレンダリングされない

Question

データの各行が別々の行にあるテーブルをレンダリングしようとしています。私の理解から、これは<tr></tr>タグ間のデータがどのようにレンダリングされるかについてのデフォルトの動作です。少なくとも、それはそれがいつも私のために機能している方法です。私はAPIエンドポイントから取得しています何と間違って何もありませんが、すべての行が同じ行にある -

function GetLastTen(){ 
    $.ajax({url: LastTen, success: function(result) { 
     var location = document.getElementById('l_ten'); 
     location.innerHTML = "<table>\n"; 
     function format(location,object){ 
      location.innerHTML += '<tr>\n' + 
            '<td>' + object.id + '</a></td>\n' + 
            '</tr>\n'; 
     } 
     $.each(result, function(elem){ 
      format(location, result[elem]); 
     }); 
     location.innerHTML += "</table>" 
    }}); 
} 

コードが適切なデータを取得します。

この

は、私が使用していたコードです。

私はブートストラップ3.3.7とjQueryの最新バージョンを使用しています。

Answer 1

変数に最初のHTML文字列を作成し、作業が完了したら、innerHTMLプロパティを設定してみてください：

var result = [{id:1},{id:2},{id:3}] 
 

 
$(document).ready(function(){ 
 
    var location = $("#l_ten") 
 
    var tableHTML = "<table>\n" 
 

 
    function format(object){ 
 
     tableHTML += '<tr>\n<td>' + object.id + '</a></td>\n</tr>\n'; 
 
    } 
 
    $.each(result, function(elem){ 
 
     format(result[elem]); 
 
    }); 
 
    location.html(tableHTML); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="l_ten"></div>