我有一个HTML文件，其中包含一张包含商品及其价格的表格。我成功地使javascript遍历了表格并计算了价格的总和，但是只有当它在同一个html文件中时才可以。我想在一个单独的html文件中显示此计算，但是这样做很麻烦。
//testTable.html
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Html Table</h2>
<table id="EstoreTable" style="width:100%">
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>iPhone X</td>
<td>10</td>
<td>299.99</td>
</tr>
<tr>
<td>Apple Watch 3</td>
<td>12</td>
<td>250.00</td>
</tr>
<tr>
<td>MacBook Pro 13" </td>
<td>7</td>
<td>1199.99</td>
</tr>
</table>
</body>
</html>
//ShoppingAmount.js
function getShoppingAmount()
{
var table = document.getElementById('EstoreTable'); //data from TestTable.html
var sum = 0;
for (var i = 1; i < table.rows.length; i++)
{
sum = sum + parseFloat(table.rows[i].cells[2].innerHTML); //stores total price into sum
}
document.getElementById("Shopamount").innerHTML = sum; //look for id in checkout.html and display there
}
//Checkout.html
<html>
<h1>Checkout</h1>
Total Shopping Amount: <span id="Shopamount" onload="getShoppingAmount()"></span>
<script src="ShoppingAmount.js"></script>
目标是让它在Checkout.html中打印，但我已经这样做了几个小时，没有任何结果。请帮助。
这是入门的基本设置。单击“签出”按钮后，testTable中的JS将计算总数，并将总数存储在localStorage中。然后触发链接，并将您重定向到结帐页面，从本地存储检索总和值并显示在该页面中。
testTable.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Html Table</h2>
<table id="EstoreTable" style="width:100%">
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>iPhone X</td>
<td>10</td>
<td>299.99</td>
</tr>
<tr>
<td>Apple Watch 3</td>
<td>12</td>
<td>250.00</td>
</tr>
<tr>
<td>MacBook Pro 13" </td>
<td>7</td>
<td>1199.99</td>
</tr>
</table>
<a href="Checkout.html" target="_blank" id="checkout">Checkout</a>
<script src="ShoppingAmount.js"></script>
</body>
</html>
ShoppingAmount.js：
function getShoppingAmount(e) {
var table = document.getElementById('EstoreTable'); //data from TestTable.html
var sum = 0;
for (var i = 1; i < table.rows.length; i++) {
sum = sum + parseFloat(table.rows[i].cells[2].innerHTML); //stores total price into sum
}
// SET SUM VIA query string
this.href += "?sum=" + sum;
// SET SUM VIA localStorage
window.localStorage.setItem( "sum", sum );
}
document.querySelector("#checkout").addEventListener("click", getShoppingAmount );
Checkout.html：
<html>
<h1>Checkout</h1>
Total Shopping Amount: <span id="Shopamount" ></span>
<script>
// GET SUM VIA localStorage
document.querySelector("#Shopamount").textContent = window.localStorage.getItem("sum");
// GET SUM VIA query string
let queryString = document.location.search;
let sum = queryString.split("=")[1];
document.querySelector("#Shopamount").textContent = sum;
</script>
[[UPDATED]包括通过@Jonathan Gray指出的通过查询字符串机制在两个页面之间传递数据的另一种方式