<分区>
javascript - 通过 JavaScript 文件创建多个表
我试图让用户按下一个按钮并获得三个具有不同标题的单独表格。这些单元格的数据在此代码中只是“测试”。
问题是这三个表都连接在一起并形成一个大表，所有标题并排放置(见底部图片)。如何让每个表占据自己的行而不是创建一个大表？生成表格的函数在这里，在“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>
最佳答案
您的问题是 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，以选择(例如)#TealiumTable
.HeaderRow
关于javascript - 通过 JavaScript 文件创建多个表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37553737/