如何显示从会话到html表的数组数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (68)

我在数组obj(ArrData)中复制了页面1中html表的数据。我已经把arrData保存到会话存储中了。现在,在第2页,如何显示从arrData到html表的数据。

第1页JS

var arrData=[];               
$("#checkout").on('click',function(){

$("#table tr").each(function(){
    var currentRow=$(this);

    var col1_value=currentRow.find("td:eq(0)").text();
    var col2_value=currentRow.find("td:eq(1)").text();
    var obj={};

    obj.col1=col1_value;
    obj.col2=col2_value;

    arrData.push(obj);
   sessionStorage.myArrData=JSON.stringify(arrData);
 });
console.log(arrData);

});

第2页

<table class="table table-checkout" id="table">
<thead>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
</thead>
<tbody>
</tbody>

第2页JS

var arrData = JSON.parse(sessionStorage.myArrData);
提问于
用户回答回答于

你需要使用sessionStorage.setItem(“foo”,12),而不是sessionStorage.foo=12;

后者是将一个新属性附加到javascript对象,而不是与浏览器会话API对话。当页面重新加载时,你所附加的对象将消失。

若要取回该项,请使用sessionStorage.getItem

用于会话存储的Mozilla文档,包括setItem和getItem

一旦你这样做了,你将需要一种在表中创建新表行的方法。用于此目的框架很多,但你也可以自己构建表 。

用户回答回答于

正如我从上面了解到的,在后面的对象数组中有数据。var arrData = JSON.parse(sessionStorage.myArrData);,格式如下。

ARRData:

[
{col1:"Item1", col2:"quantity1"},
{col1:"Item1", col2:"quantity1"},
...
]

现在,在第2页上显示这些数据

var rows = "";
arrData.map((row)=>{
   var row = '<tr><td>'+row.col1+'</td><td>'+row.col2+'</td></tr>';
   rows = rows+row;
})
var tbody = document.queryselector('#table tbody');
tbody.innerHTML = rows;

扫码关注云+社区

领取腾讯云代金券