Question

如何通过单击按钮将第一页上的所有表数据传递到第二页上的另一表。我听说我们可以使用localstorage来做到这一点。但是，我不确定如何将其用于数量不固定的数据。未固定表示用户可以选择要添加到表中的项目数。我是javascript新手，需要一些指导。您应该知道我没有使用任何服务器端。预先感谢。

第一页

HTML

<div class="item active">
<img src="item/dapur.png" class="img-responsive" style="height:120px;">
<input class="input-display itemname" type="text" id="itemname" value="Light" readonly>
<b><input class="input-display itemprice" type="text" id="itemprice" value="30" readonly></b>
<input class="form-control quantity" type="number" id="quantity">
<button class="btn default"  onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
<img src="item/dapur.png" class="img-responsive" style="height:120px;">
<input class="input-display itemname" type="text" id="itemname" value="Water" readonly>
<b><input class="input-display itemprice" type="text" id="itemprice" value="10" readonly></b>
<input class="form-control quantity" type="number" id="quantity">
<button class="btn default"  onclick="addHtmlTableRow(this);">Donate</button>
</div>

<div class="item">
<img src="item/dapur.png" class="img-responsive" style="height:120px;">
<input class="input-display itemname" type="text" id="itemname" value="Bulb" readonly>
<b><input class="input-display itemprice" type="text" id="itemprice" value="12" readonly></b>
<input class="form-control quantity" type="number" id="quantity">
<button class="btn default" onclick="addHtmlTableRow(this);">Donate</button>
</div>


<table class="table" id="table">
<thead>
<tr>
  <th>Item</th>
  <th>Quantity</th>
  <th>Price per unit</th>
  <th>Total price Item</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="totaldonation"></div>
<button>Transfer data to next page table</button>

JS

var totaldonation = 0;

function addHtmlTableRow(ele) {
var newRow = table.insertRow(table.length);

var elitem = ele.closest('.item');
var quantity = elitem.querySelector(".quantity").value;
var itemprice = elitem.querySelector(".itemprice").value;
var totalprice = itemprice * quantity;

addCell(newRow, 0, elitem.querySelector('.itemname').value);
addCell(newRow, 1, quantity);
addCell(newRow, 2, itemprice);
addCell(newRow, 3, totalprice);

totaldonation = totaldonation + totalprice;
document.getElementById("totaldonation").innerHTML = totaldonation;
}

function addCell(row, index, value) {
row.insertCell(index).innerHTML = value;;
}

第二页

<table class="table" id="table">
<thead>
<tr>
  <th>Item</th>
  <th>Quantity</th>
  <th>Price per unit</th>
  <th>Total price Item</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

在下一页将大量数据行传递到表

0 个答案: