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（＆＃34）创建表格相同; tr＆＃34;）然后使用table.append(tr);将其附加到表中。

此处阅读了有关document.createElement（）docs：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

Answer 2

试一试。我用它（l ink）作为指导来写它。它可以更清洁，但我现在真的没有很多时间在我手中：

var dataSource = jsonTable();


function tableCreate() {
var container = document.getElementById("tableContainer");
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var header = document.createElement("THEAD");
tbl.appendChild(header);
tbl.appendChild(tblBody);
tbl.style.width = '50%';
tbl.style.border = '1px solid black';

var oRow = document.createElement("TR");
header.appendChild(oRow);
header.setAttribute("bgColor", "lightskyblue");
// Create and insert cells into the header row.
for (i = 0; i < dataSource.headers.length; i++) {
    var oCell = document.createElement("TH");
    oCell.innerHTML = dataSource.headers[i];
    oCell.style.border = '1px solid lightskyblue';
    oRow.appendChild(oCell);


}


// Insert rows and cells into bodies.
for (i = 0; i < dataSource.headers.length; i++) {

    oRow = document.createElement("TR");
    tblBody.appendChild(oRow);
    for (j = 0; j < dataSource.rows.length; j++) {
        oCell = document.createElement("TD");
        oCell.innerHTML = dataSource.rows[i][j];
        oCell.style.border = '1px solid black';
        oRow.appendChild(oCell);
    }
}

container.appendChild(tbl);




}

tableCreate();

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

return data;

}

我希望它有所帮助。

Javascript：构建表并插入数据

2 个答案: