Question

我试图允许用户按下按钮并给出三个具有不同标题的单独表格。这些单元格的数据只是在此代码中“测试”。

问题是这三个表都连接在一起并制作了一个大表，所有标题并排放置（见底部图片）。如何让每个表占用自己的行而不是创建一个大表？这里给出了生成表的函数，在“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>

tables

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元素中的哪一个？（提示：这是第一个）。

让您的行具有唯一ID，使用类和选择器来选择.HeaderRow下的#TealiumTable <{1}}

通过JavaScript文件

1 个答案: