javascript - 表在$ .getJSON Javascript内没有任何类

我正在尝试使用从URL获取的json数组创建表。

$.ajax({
    url:"https://api.coinmarketcap.com/v1/ticker/",
    method: "GET"

}).done(function(data) {

    document.write('<table class="table table-striped">');
    document.write('<tr><th>ID</tr></th>');

    for(var i = 0; i < 100; i++) {
        document.write('<tr><td>' + data[i].id + "</tr></td>");
    }

    document.write('<tr><th>PRICE</tr></th>');

    for(var i = 0; i < 100; i++) {
        document.write('<tr><td>' + data[i].price_usd + "</tr></td>");
    }

    document.write('</table>');
})

在控制台中，我看到正在创建表，但是类“ table”没有注册。

如果我用

function getJson(yourUrl){
    var Httpreq = new XMLHttpRequest(); // a new request
    Httpreq.open("GET",yourUrl,false);
    Httpreq.send(null);
    return Httpreq.responseText;
}

var json = JSON.parse(getJson("https://api.coinmarketcap.com/v1/ticker/"))

并循环遍历变量json，我可以使用该类，并且效果很好，但是由于它是同步的，因此不建议打开Httpreq。

最佳答案

使用innerHTML。

<div id="records"></div>

使用此代码100％工作

$.ajax({
   url:"https://api.coinmarketcap.com/v1/ticker/",
   method: "GET"

}).done(function(data) {
   var html = '';
   html +='<table class="table table-striped">';
   html +='<tr><th>ID</th><th>PRICE</th></tr>';
   for(var i = 0; i < 100; i++) {
     html +='<tr><td>' + data[i].id + '</td><td>' + data[i].price_usd + '</td></tr>';
   }
   html +='</table>';
   var container = document.getElementById('records');
   container.innerHTML = html;
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="records"></div>

关于javascript - 表在$ .getJSON Javascript内没有任何类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45641858/