使用 AJAX JavaScript 将数据加载到 HTML 表中不起作用

Question

我将数据存储在 json 文件中，如下所示：

[
["cell1", "cell2", "cell3"],
["cell4", "cell5", "cell6"]
...
]

我想将 json 数据转换为 html 表，所以我创建了以下代码（html 结构 + 从位于同一目录“rows.json”中的专用 json 数据文件中单独加载数据）：

<body>
    <table id="tab">
        <thead>
            <tr>
                <th>column_1</th>
                <th>column_2</th>
                <th>column_3</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

<script type="text/javascript">
        const TabBody = document.querySelector("#tab > tbody") 
        function loadData() {
            const request = new XMLHttpRequest();
            request.open("get", "rows.json");
            request.onload = () => {
                try {
                    const json = JSON.parse(request.responseText);
                    populateTable(json);
                    }  catch (e) {
                        console.warn("error");
                    }   
                };
                
            request.send();
        }
        function populateTable(json){
            
            while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}

            json.forEach((row) => { 
                const tr = document.createElement("tr");

                row.forEach((cell) => {
                    const td = document.createElement("td");
                    td.textContent = cell;
                    tr.appendChild(td);})
                
                TabBody.appendChild(tr);
            })            
        }
    </script>
</body>

代码不起作用，并且表体未加载显示。 也许代码不正确，或者效率不高，并且有更好的方法来做到这一点..

Answer 1

您populateTable function 似乎是正确的，我将它复制到一个片段中，它工作正常。

您是否从XMLHttpRequest获得正确的数据？
您在哪里调用loadData function？ 你忘了叫它吗？

 const data = [ ["cell1", "cell2", "cell3"], ["cell4", "cell5", "cell6"] ] const TabBody = document.querySelector("#tab > tbody"); function populateTable(json) { while (TabBody.firstChild) { TabBody.removeChild(TabBody.firstChild); } json.forEach((row) => { const tr = document.createElement("tr"); row.forEach((cell) => { const td = document.createElement("td"); td.textContent = cell; tr.appendChild(td); }) TabBody.appendChild(tr); }) } populateTable(data);

 <table id="tab"> <thead> <tr> <th>column_1</th> <th>column_2</th> <th>column_3</th> </tr> </thead> <tbody> </tbody> </table>

Answer 2

在这种情况下，您可以使用 Tabulator。 您可以在其中加载 json 数据，它为您提供了许多功能和设置表格样式的能力。

在这里您可以了解如何从 ajax 请求中插入数据： http://tabulator.info/docs/4.1/data#ajax

如果您想发出请求并在表格中输入响应，可以在您的代码得到响应后执行此操作：

var table = new Tabulator("#example-table", {
                height: '70%', // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
                data: res.json, //assign data to table, json response
                layout: "fitDataFill", //fit columns to width of data
                pagination: "local",
                paginationSize: 10,
                paginationSizeSelector: [5, 10, 15, 20],
                movableColumns: true,
                selectable: true,
                columns: [
                    {
                        formatter: "buttonCross", align: "center", title: "del", headerSort: false, cellClick: function (e, cell) {
                            if (confirm('Are you sure you want to delete this entry?'))
                                cell.getRow().delete();
                            console.log(rowJson = cell.getRow().getData())
                        }
                    },
                    { title: "id", field: "id", sorter: "number" },
                    { title: "Name", field: "name", sorter: 'string' },
                    { title: "phone", field: "phone", sorter: "number" },
                    { title: "email", field: "email", sorter: 'string' },
                    { title: "location", field: "location", sorter: 'string' },
                    { title: "price/night", field: "price", sorter: 'number' },
                    { title: "number of rooms", field: "roomsnumber", sorter: 'number' },
                    { title: "capacity", field: "capacity", sorter: 'number' },
                    { title: "available", field: "available", sorter: 'string' },
                    { title: "start time", field: "startTime", sorter: 'string' },
                    { title: "date", field: "date", sorter: "date", },
                ]
                
            });

它非常易于使用，并且有很多功能..

使用 AJAX JavaScript 将数据加载到 HTML 表中不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-08-05 13:07:08

解决方案2
0 2020-08-05 13:00:37

使用 AJAX JavaScript 将数据加载到 HTML 表中不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-08-05 13:07:08

解决方案2 0 2020-08-05 13:00:37

解决方案1
1 已采纳 2020-08-05 13:07:08

解决方案2
0 2020-08-05 13:00:37