通过 JavaScript 文件创建多个表

Question

我正在尝试让用户按下一个按钮并获得三个具有不同 headers 的独立 table。这些单元格的数据在这段代码中只是“测试”。

问题是三个 table 全部连接在一起形成一个大 table，所有 headers 都放在 side-by-side（见底部图片).我怎样才能让每个 table 占据自己的行而不是创建一个大 table？生成 tables 的函数在这里，在“tables.js”中给出（注意：我知道我可以创建一个函数来使这个文档更短，但这似乎不是问题所在。 )

function createQualtricsTable() {
    var toAdd1 = ["Actions", "Survey Name", "Response ID", "GUID", "Comments", "Submission Date", "WLP", "Current Page"];
    var x = document.createElement("table");
    x.setAttribute("id", "QualtricsTable");
    document.getElementById("app-space").appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "HeaderRow");
    document.getElementById("QualtricsTable").appendChild(y);

    var z = document.createElement("TR");
    z.setAttribute("id", "DataRow");
    document.getElementById("QualtricsTable").appendChild(z);

    for(i = 0; i < toAdd1.length; i++){
        var newcolumn = document.createElement("TD");
        var t = document.createTextNode("test");
        newcolumn.appendChild(t);
        document.getElementById("DataRow").appendChild(newcolumn);
    }
    for(i = 0; i < toAdd1.length; i++){
        var newcolumn = document.createElement("TD");
        var t = document.createTextNode(toAdd1[i]);
        newcolumn.appendChild(t);
        document.getElementById("HeaderRow").appendChild(newcolumn);
    }
    br = document.createElement("br");
    document.getElementById("app-space").appendChild(br);
}

function createODSTable(){
    var toAdd2 = ["AgentID", "HUBID", "Email", "PhoneNumber", "FirstName", "LastName", "SrcSystem", "PartyRoleID", "RoleStatus"];
    var x = document.createElement("table");
    x.setAttribute("id", "ODSTable");
    document.getElementById("app-space").appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "HeaderRow");
    document.getElementById("ODSTable").appendChild(y);

    var z = document.createElement("TR");
    z.setAttribute("id", "DataRow");
    document.getElementById("ODSTable").appendChild(z);

    for(i = 0; i < toAdd2.length; i++){
        var newcolumn = document.createElement("TD");
        var t = document.createTextNode("test");
        newcolumn.appendChild(t);
        document.getElementById("DataRow").appendChild(newcolumn);
    }
    for(i = 0; i < toAdd2.length; i++){
        var newcolumn = document.createElement("TD");
        var t = document.createTextNode(toAdd2[i]);
        newcolumn.appendChild(t);
        document.getElementById("HeaderRow").appendChild(newcolumn);
    }
    br = document.createElement("br");
    document.getElementById("app-space").appendChild(br);
}

function createTealiumTable(){
    var toAdd3 = ["TimeStamp", "Action", "Page Name", "URL", "Details", "Product LOB"];
    var x = document.createElement("table");
    x.setAttribute("id", "TealiumTable");
    document.getElementById("app-space").appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "HeaderRow");
    document.getElementById("TealiumTable").appendChild(y);

    var z = document.createElement("TR");
    z.setAttribute("id", "DataRow");
    document.getElementById("TealiumTable").appendChild(z);

    for(i = 0; i < toAdd3.length; i++){
        var newcolumn = document.createElement("TD");
        var t = document.createTextNode("test");
        newcolumn.appendChild(t);
        document.getElementById("DataRow").appendChild(newcolumn);
    }
    for(i = 0; i < toAdd3.length; i++){
        var newcolumn = document.createElement("TD");
        var t = document.createTextNode(toAdd3[i]);
        newcolumn.appendChild(t);
        document.getElementById("HeaderRow").appendChild(newcolumn);
    }
    br = document.createElement("br");
    document.getElementById("app-space").appendChild(br);
}

function createTables(){
    createQualtricsTable();
    createODSTable();
    createTealiumTable();
}

这是 CSS:

table{
    margin: 10px auto;
    padding: 0;
    width: 100%;
    height: auto;
    border-collapse: collapse;
    text-align: center;
}
tr:first-child{
    background-color: #4889A7;
}
tr:nth-child(2) td{
    border: 1px;
    border-style: solid;
    border-color: #D0D0D0;
}

和 HTML:

<div id = "app-space">
    <form class = "input-form">
        Enter VOC ID
        <input type = "text" name = "vocid" id = "text-box"><br>
    </form>
    <button onclick = "createTables()" class = "button"> Submit </button>
    <script>
        src = "tables.js"
    </script>
</div>

Answer 1

您的问题是 id 必须是唯一的！。在你的第一个函数中你这样做：

var y = document.createElement("TR");
y.setAttribute("id", "HeaderRow");
// ...

var z = document.createElement("TR");
z.setAttribute("id", "DataRow");

在你的第二个（和第三个）函数中你这样做：

var y = document.createElement("TR");
y.setAttribute("id", "HeaderRow");
// ...

var z = document.createElement("TR");
z.setAttribute("id", "DataRow");

所以现在你有三个 TR 个元素，id 为 HeaderRow。那么你认为这会做什么？

document.getElementById("HeaderRow").appendChild(newcolumn);

您认为它会附加到三个 HeaderRow 元素中的哪一个？（提示：这是第一个）。

使您的行具有使用 class 的唯一 ID 和一个选择器来选择（例如）#TealiumTable

下的 .HeaderRow

通过 JavaScript 文件创建多个表

Creating multiple tables through JavaScript file

javascript

html

css

css-tables