Appending rows to table using loop ( Javascript )

Question

I have a two webpages. eventsCreated and createAnEvent. In createAnEvent, a form is used to allow users' inputs. The inputs are then stored to local storage with the following function:

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 made createEvent an array so as to store the multiple inputs because there cannot be only one event created. In the eventsCreated page, I need to display the user inputs in a table that looks something like this :

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

I am not sure how to use javascript to get the event details that the user has entered in the createAnEvent page and display it in the table. This is the 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

I would use jquery to add elements to your page.

But you can use the dom if you like.

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

This should work for you or close to it. You table is also wrong please correct it to this.

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

See for examples:

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