無法獲取HTML表以顯示來自API的數據

Question

我遵循了一個教程，該教程從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>

Answer 1

您的body需要有一個table標簽，所以類似：

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

不要忘記使用與js中指定的類相同的類，在本例中為MyTable因為$('.MyTable').html(tbl) 。

無法獲取HTML表以顯示來自API的數據

問題描述

1 個解決方案

解決方案1
0 2019-07-23 09:08:56

無法獲取HTML表以顯示來自API的數據

問題描述

1 個解決方案

解決方案1 0 2019-07-23 09:08:56

解決方案1
0 2019-07-23 09:08:56