Erstellen mehrerer Tabellen über JavaScript-Datei

Question

Ich versuche, einen Benutzer zu ermöglichen, eine Schaltfläche zu drücken und drei separate Tabellen mit unterschiedlichen Headern zu geben. Die Daten für diese Zellen sind nur "Test" in diesem Code.

Das Problem ist, dass die drei Tabellen alle zusammenkommen und einen großen Tisch mit allen Kopfzeilen nebeneinander bilden (siehe Bild unten). Wie kann ich sicherstellen, dass jeder Tisch eine eigene Zeile belegt, anstatt einen großen Tisch zu erstellen? Die Funktionen zum Erzeugen der Tabellen sind hier gegeben, in „tables.js“. (Anmerkung: Ich weiß, dass ich eine Funktion erstellen, kann dieses Dokument viel kürzer zu machen, aber das scheint nicht das Problem zu sein)

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(); 
} 

Hier

ist die 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; 
} 

Und die 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

Ihr Problem ist, dass IDs eindeutig sein müssen!. In Ihrer ersten Funktion tun Sie dies:

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

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

In Ihrer zweiten (und dritten) Funktion, die Sie dies tun:

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

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

So, jetzt haben Sie drei TR Elemente mit der ID HeaderRow. Also, was denkst du wird das tun?

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

Welche der drei HeaderRow Elemente halten Sie es anhängen wird? (Hinweis: es ist der erste).

Machen Sie Ihre Reihen haben eindeutige IDs der Verwendung eine Klasse und einen Selektor die .HeaderRow unter (zum Beispiel) holen #TealiumTable