2013-04-16 140 views
0

我正在将我的值存储到本地存储中,并且我试图在表中显示信息,但它似乎不起作用,并且它始终将其输出到第一列中,并垂直排列。 例如,当我输入我的信息时,我希望它能像这样出来本地存储表

|余额|名称|数量|价格|

| 100 | test | 100 | 1.99 |

,而是它正在显示这样的:

|资产|名称|数量|价格| | 100 | | test | | 100 | | 1.99 |

这是我的本地存储

function save(item) { 
      var playlistArray = getStoreArray("playlist"); 
      playlistArray.push(item); 
      localStorage.setItem("playlist", JSON.stringify(playlistArray)); 
     } 

function Load_storage() { 
      var playlistArray = get_Storage(); 
      var ul = document.getElementById("playlist"); 
      if (playlistArray != null) { 

       for (var i = 0; i < playlistArray.length; i++) 
       { 
        var li = document.createElement("table"); 
       li.innerHTML = playlistArray[i]; 
        ul.appendChild(li); 
                         } 
      } 
     } 

function get_Storage() { 
      return getStoreArray("playlist"); 
     } 

function getStoreArray(key) { 
      var playlistArray = localStorage.getItem(key); 
      if (! playlistArray) { 
       playlistArray = new Array(); 
      } 
      else { 
       playlistArray = JSON.parse(playlistArray); 
      } 
      return playlistArray; 
     } 

的代码,我通过这个功能

var table=document.getElementById("myTable"); 
    var row=table.insertRow(1); 
    var cell1=row.insertCell(0); // bank account 
    var cell2=row.insertCell(1); // name 
    var cell3=row.insertCell(2); // Quantity 
    var cell4=row.insertCell(3); // price 

    cell1.innerHTML=Balance ;    // bank account 
    cell2.innerHTML=name;   //stock symbol 
    cell3.innerHTML=quantity;   // Quantity 
    cell4.innerHTML=price;    // bought 
      var SAVE= document.getElementById("myTable"); 
       SAVE.appendChild(row); 

       save(cell1.innerHTML); 
       save(cell2.innerHTML); 
       save(cell3.innerHTML); 
       save(cell4.innerHTML);     
// save(Balance+"......................."+ 
       name+"......................."+ 
       quantity+"......................."+ 
       price + "......................."); 

这被注释掉了,因为它会始终显示行,但我不把我的本地存储想要这样的方式即使这种方式工作

回答

0

将表列标题放在您的HTML。它比用JavaScript这样做效率高得多:

<body> 
    <table id='myTable'> 
     <thead> 
     <tr> 
      <th>Balance</th> 
      <th>Name</th> 
      <th>Quantity</th> 
      <th>Price</th> 
     </tr> 
     </thead> 
    </table> 
</body> 

一些更改JavaScript的:

var table = document.getElementById("myTable"), 

    row = table.insertRow(1), 
    cell1 = row.insertCell(0), // bank account 
    cell2 = row.insertCell(1), // name 
    cell3 = row.insertCell(2), // Quantity 
    cell4 = row.insertCell(3), // price 

    testBalance = '3.00', 
    testName = 'Mike', 
    testQuantity = '2.00', 
    testPrice = '5.00'; 

cell1.innerHTML = testBalance; // bank account 
cell2.innerHTML = testName; //stock symbol 
cell3.innerHTML = testQuantity; // Quantity 
cell4.innerHTML = testPrice; // bought 

//you can remove these lines 
//var SAVE = document.getElementById("myTable"); 
//SAVE.appendChild(row); 

save(cell1.innerHTML); 
save(cell2.innerHTML); 
save(cell3.innerHTML); 
save(cell4.innerHTML); 
// save(Balance+"......................."+ 
// name + "......................." + 
// quantity + "......................." + 
//price + //"......................."); 

这里是一个jsFiddle
我希望这可以帮助:-)

+0

但它一旦刷新它仍然做同样的事情,所以这不是一个解决方案...? – utchia

+0

什么时候**什么**刷新?你刷新的意思是什么? – orb

+0

页面刷新时本地存储全部变得古怪 – utchia