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

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

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

我想将json数据转换为html表，因此我创建了以下代码html结构+从位于同一目录rows.json中的专用json数据文件中分别加载数据：

---

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

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

在这里，您可以了解如何从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", },
                ]
                
            });

它非常易于使用，并且有许多功能。

您的populateTable函数似乎正确，我将其复制到了一个代码段中，它工作正常

您是否从XMLHttpRequest获取了正确的数据？ 在哪里调用loadData函数？你忘了给它打电话了吗？ 常数数据=[ [cell1，cell2，cell3]， [cell4、cell5、cell6] ] const TabBody=document.querySelectortab>tbody； 函数populateTablejson{ 而TabBody.firstChild{ TabBody.removeChildTabBody.firstChild； } json.forEachrow=>{ const tr=document.createElementtr； row.forEachcell=>{ const td=document.createElementtd； td.textContent=单元格； tr.td； } TabBody.appendChildtr； } } 可普及数据； 第1列 第2列 第3栏

---

什么不起作用？你会犯什么错误？如何重现这个问题？关于这个问题，没有什么是清楚的。这个表不能在浏览器上显示，我的问题是我想把json数据转换成html表，可能是一个需要调用loadData的简单例子；就在结束标记之前？

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", },
                ]
                
            });