使用循環（Javascript）將行附加到表格

我有兩個網頁。 eventsCreated和createAnEvent。在createAnEvent中，表單用於允許用戶輸入。然後，輸入被存儲到本地存儲，有以下功能：使用循環（Javascript）將行附加到表格

document.addEventListener("DOMContentLoaded",docIsReady); 
var createEvent; 
function docIsReady(){ 

createEvent=localStorage.getItem("createEvent"); 

if (createEvent==null){ 
    CreateEvent=[]; 
} 
else { 
    createEvent=JSON.parse(createEvent); 
} 

} 
function saveToStorage() { 
    var one; 
    var nameofevent=document.getElementById("name").value; 

    var pList=document.getElementsByName("pos"); 
    var positions=[]; 

    for (i=0; i<pList.length; i++){ 
    positions.push(pList[i].value); 
    console.log(pList[i].value); 
    } 

    localStorage["X"]=JSON.stringify(positions); 
    var r=localStorage["X"]; 
    r=JSON.parse(r); 

//for (i=0; i<positions.length; i++){ 
//console.log(positions[i].value); 
//} 

    var venue= document.getElementById("venue").value; 
    var date=document.getElementById("date").value; 
    var starttime=document.getElementById("timeStart").value; 
    var endtime=document.getElementById("timeEnd").value; 
    var contact=document.getElementById("contact").value; 
    var email=document.getElementById("email").value; 
    var desc=document.getElementById("desc").value; 


    one={"name":nameofevent,"pos":r,"venue":venue,"date":date,"timeStart":starttime,"timeEnd":endtime,"contact":contact,"email":email,"desc":desc}; 
    createEvent.push(one); 
    localStorage.setItem("createEvent",JSON.stringify(createEvent)); 
    //alert(JSON.stringifys(one)); 
    //alert(one.pos[0]); //to get one position 
    return false; 
}

我製成createEvent的陣列，以便存儲多個輸入，因爲不能有隻有一個事件創建。在eventsCreated頁，我需要在這看起來是這樣的一個表來顯示用戶輸入：

<table border="1px" id="list"> 
     <tr> 
     <th>Name of event</th> 
     <th>Positions</th> 
     <th>Venue</th> 
     <th>Date</th> 
     <th>Start Time</th> 
     <th>End Time</th> 
     <th>Points Awarded</th> 
     </tr> 
    </table>

我不知道如何使用JavaScript來獲取事件的細節，用戶已經在createAnEvent頁面中輸入並將其顯示在表格中。這是JavaScript：

function addRow() { 
    var table = document.getElementById("list"); 
    var one = JSON.parse(localStorage["createEvent"]); 
    for (var i=0; i<one.length; i++) { 
     var row = table.insertRow(i); 
     for (var j=0; j<=6; j++) { 
      var cell = row.insertCell(j); 
     } 
     cell[0].innerHTML = "one[0]"; 
     cell[1].innerHTML = "one[1]"; 
     cell[2].innerHTML = "one[1]"; 
     cell[3].innerHTML = "one[3]"; 
     cell[4].innerHTML = "one[4]"; 
     cell[5].innerHTML = "one[5]"; 
     cell[6].innerHTML = "one[6]"; 
    } 
}

來源

2016-08-03 Tan

我會使用jQuery元素添加到您的網頁。

但是，如果你喜歡，你可以使用dom。

function addRow() { 
    var table = document.getElementById("list"); 
    var one = JSON.parse(localStorage["createEvent"]); 
    for (var i = 0; i < one.length; i++) { 
     var this_tr = document.createElement("tr"); 
     for (var j=0; j < one[i].length; j++) { 
      var this_td = document.createElement("td"); 
      var text = document.createTextNode(one[i][j]); 
      this_td.appendChild(text); 
      this_tr.appendChild(this_td); 
     } 
     table.appendChild(this_tr); 
}

這應該適合您或接近它。你表也錯了，請糾正這一點。

<table border="1px"> 
    <thead> 
    <tr> 
     <th>Name of event</th> 
     <th>Positions</th> 
     <th>Venue</th> 
     <th>Date</th> 
     <th>Start Time</th> 
     <th>End Time</th> 
     <th>Points Awarded</th> 
    </tr> 
    </thead> 
    <tbody id="list"> 
    </tbody> 
</table>

見例子：

http://www.w3schools.com/jsref/met_node_appendchild.asp

來源

2016-08-03 16:03:08 JQluv

使用循環（Javascript）將行附加到表格

回答

相關問題