无法获取 HTML 表格以显示来自 API 的数据答案

【问题标题】：Cannot get HTML table to display data from API无法获取 HTML 表格以显示来自 API 的数据
【发布时间】：2019-07-23 08:31:47
【问题描述】：

我遵循了一个从 API 获取 JSON 数据并将其呈现到表格中的教程，但是当我按下“创建表格”按钮时，表格没有显示出来。然而，“创建 JSON 数据”按钮是有效的，它会创建虚拟数据作为测试以显示在表格中，“创建表格”按钮也可以工作，但只是不显示表格。

可能是 document.GetElementById、var tbl = js.CreateTable 或 var tbl = js.CreateTable 导致了问题吗？

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>JSON to Table</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js" type="text/javascript"></script>

    <script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js" type="text/javascript"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.6/chance.min.js" type="text/javascript"></script>

<body>
    <div id="jsonData">
    <button type="button" class="btn btn-primary CreateJSON">Create JSON Array</button>
    <button type="button" class="btn btn-primary CreateMyTable">Create Table</button>
</div>
</body>

<script>


    $(document).ready(function($)
    {
        function CreateJSONArray()
        {
        var total_rows = 10;

        console.time('create_json_array')
        var arr = []
        for (var i = 0; i < total_rows; i++)
        {
            arr.push({
                "id": i +1,
                "first_name": chance.first(),
                "email": chance.email({domain: 'gmail.com'}),
                "ip_address": chance.ip(),
            })
        };
        console.timeEnd('create_json_array')
        return arr;
        document.getElementById(CreateJSONArray)
    }

    $(document).on('click', '.CreateJSON', function(event)
    {
        event.preventDefault();
        var data = CreateJSONArray();
        console.log(data);
    });

    $(document).on('click', '.CreateMyTable', function(event)
    {
        event.preventDefault();
        var data = CreateJSONArray();
        //var tbl = js.CreateTable(data);
        var tbl = js.CreateTable(data,['Line Num','First Name','User Emails','IP Address']);

        $('.MyTable').html(tbl);
    });

});
</script>

</head>


</html>

【问题讨论】：

你错过了这张桌子：<table class="MyTable"></table>（这就是为什么$('.MyTable') 出现空白）
非常感谢，我把它放在了body标签中，它成功了！

标签： javascript html html-table

【解决方案1】：

您的body 中需要有一个table 标记，例如：

<table class="MyTable"></table>

不要忘记使用与您在 js 中指定的类相同的类，在本例中为 MyTable，因为 $('.MyTable').html(tbl)。

【讨论】：