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

Question

我已将第1页html表的数据复制到数组obj（arrData）中。而且我已经将arrData保存到会话存储中。现在在第2页上，如何显示从arrData到html表的数据。 JS的新功能。预先感谢

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

Answer 1

您需要使用sessionStorage.setItem（“ foo”，12）而不是sessionStorage.foo = 12;

后者会将新属性附加到javascript对象，而不是与浏览器会话API通讯。页面重新加载时，您附加的对象不见​​了。

要取回该物品，请使用sessionStorage.getItem

Mozilla docs for sessionStorage including setItem and getItem

完成此操作后，您将需要一种在表中创建新表行的方法。有许多用于此目的的框架，但是您也可以自己构建表（步骤比其他元素多一些）

How to insert row in HTML table body in Javascript?

Answer 2

据我从上方了解，您在<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div id="carouselExampleControls" class="carousel vert slide vertical" data-ride="carousel" data-interval="900"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block mx-auto img-fluid" src="image/4.png" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="image/3.png" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="image/2.png" alt="Third slide"> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>之后的对象数组中有以下格式的数据。

arrData：

var arrData = JSON.parse(sessionStorage.myArrData);

现在可以在第2页上显示此数据

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