Anfügen von Zeilen an Tabellen mithilfe von Schleifen (JavaScript)

Question

Ich habe zwei Webseiten. eventsCreated und createAnEvent. In createAnEvent wird ein Formular verwendet, um Benutzereingaben zuzulassen. Die Eingaben werden dann in dem lokalen Speicher mit der folgenden Funktion gespeichert:

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

I hergestellt create eine Anordnung, um die Mehrfacheingaben zu speichern, weil es nicht nur ein Ereignis erstellt werden kann. In der eventsCreated Seite muß ich die Benutzereingaben in einer Tabelle anzuzeigen, die etwa wie folgt aussieht:

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

Ich bin nicht sicher, wie Sie Javascript verwenden, um die Ereignisdetails zu erhalten, dass der Benutzer in der createAnEvent Seite eingegeben hat und zeige es in der Tabelle an. Dies ist die 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]"; 
    } 
} 

Answer 1

ich jQuery verwenden würde Elemente zu Ihrer Seite hinzuzufügen.

Aber Sie können das Dom verwenden, wenn Sie möchten.

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

Dies sollte für Sie oder in der Nähe funktionieren. Ihr Tisch ist auch falsch, bitte korrigieren Sie dies.

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

Siehe Beispiele:

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