sahilkmr78 sahilkmr78 - 6 months ago 21
HTML Question

Creating multiple tables through JavaScript file

I am trying to allow a user to press a button and be given three separate tables with different headers. The data for these cells is just “test” in this code.

The problem is that the three tables all join together and make one large table with all of the headers placed side-by-side (see picture at the bottom). How can I make each table occupy its own line instead of creating one big table? The functions for generating the tables is given here, in “tables.js” (note: I know I can create a function to make this document much shorter, but that does not seem to be the issue.)

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


Here is the 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;
}


And the 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

Your problem is that id's need to be unique!. In your first function you do this:

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

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

In your second (and third) function you do this:

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

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

So now you have three TR elements with the id HeaderRow. So what do you think this will do?

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

Which of the three HeaderRow elements do you think it will append to? (hint: it's the first one).

Make your rows have unique id's of use a class and a selector to pick the .HeaderRow under (for example) #TealiumTable