通过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>

tables

来源

2016-05-31 sahilkmr78

的.HeaderRow我认为这是正常工作，只是有CSS的问题，因为表......他们看起来是当我运行代码时是分开的。 –

不要在评论部分回答。编辑你的问题，尽量传达尽可能高效的概念。在 – Trix

之后立即删除此评论您可能想要重新审视表的概念，特别是表格设计中“tr”的作用。您创建一个单独的tr，然后不断向其添加列。如果你想要多行，你为什么不添加它们？ – scrappedcola

你的问题是，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");

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

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

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

让你的行具有使用的唯一的ID的一类，并选择挑下（例如）#TealiumTable

来源

2016-05-31 19:35:06

太棒了，谢谢！事后看来，我应该创建一个函数让我创建表而不是复制所有的代码。 – sahilkmr78

通过JavaScript文件创建多个表

回答

相关问题