2016-08-03 14 views
0

私は2つのWebページを持っています。 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> 

私は、ユーザーがcreateAnEventページに入力されたことをイベントの詳細を取得するにはJavaScriptを使用する方法がわかりませんそれをテーブルに表示します。 これは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]"; 
    } 
} 

答えて

0

私はあなたのページに要素を追加するために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

関連する問題