通過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文件創建多個表

回答

相關問題