Javascript:建表和插入数据

Question

有没有一种方法可以完全从 Javascript 构建表格而不使用 HTML？我这里有一些不言自明的代码，我想使用 Javascript 创建一个 HTML 表格。

我所做的是从标题开始分隔行并初始化一个包含“tableContainer”的变量“container”，但在创建表时不知道如何实现 javascript 部分。

function jsonTable() {
    var data = {
        headers: ["First Name", "Last Name", "Age"],
        rows: [
            ["John", "Doe", 30],
            ["Jane", "Doe", 27],
            ["Mac", "Smith", 52]
        ]
    };
    var container = document.getElementById("tableContainer");

}

Answer 1

是的，你可以，使用 var table=document.createElement("table") 并使用 document.body.append(table); 将其附加到正文，然后创建 tr 和 td 的方式与通过 var tr=document.createElement("tr") 创建表格的方式相同，然后使用 table.append(tr); 将其附加到表格.

此处阅读有关 document.createElement() 文档:https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

以及一些关于如何使用 js 动态创建表的文章或教程:http://www.mysamplecode.com/2012/04/generate-html-table-using-javascript.html

如果您希望将表格附加到 tableContainer div，则不要将其附加到正文，而是使用 document.getElementById("tableContainer").append(table);

请了解基本的 js DOM 操作，此处:https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

和一些教程/文章:http://callmenick.com/post/basics-javascript-dom-manipulation