Question

我有一个HTML文件，其中包含一张包含商品及其价格的表格。我成功地使javascript遍历了表格并计算了价格的总和，但是只有当它在同一个html文件中时才可以。我想将此计算结果显示在一个单独的html文件中，但是这样做很麻烦。

//testTable.html

<!DOCTYPE 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>
    <a href="assign1_agm75_checkout.html" target="_blank" id="checkout">Checkout</a>
    <script src="ShoppingAmount.js"></script>
    </body>  

</html>

//ShoppingAmount.js

function getCheckoutAmounts()
{ 
    var table = document.getElementById('EstoreTable'); //data from TestTable.html
    var sum = 0,
        taxTotal = 0,
        tax = .0825,
        shipping = 5.99,
        due = 0;

    for (var i = 1; i < table.rows.length; i++)
        {
           sum = sum + parseFloat(table.rows[i].cells[2].innerHTML); //stores total price into sum
        }

    taxTotal = tax * sum; //stores calculated tax

    due = sum + taxTotal + shipping;

    // SET VIA query string
    this.href += "?sum=" + sum;
    this.href += "?taxTotal=" + taxTotal;
    this.href += "?shipping=" + shipping;
    this.href += "?due=" + due;

    // SET SUM VIA localStorage
    window.localStorage.setItem("sum", sum);
    window.localStorage.setItem("taxTotal", taxTotal);
    window.localStorage.setItem("shipping", shipping);
    window.localStorage.getItem("due", due);

}

document.querySelector("#checkout").addEventListener("click", getCheckoutAmounts);

//Checkout.html

<html>
<h1>Checkout</h1>

Total Shopping Amount: $<span id="Shopamount"></span><br>

Total Tax: $<span id="TaxTotal"></span><br>

Total Shipping Charges: $<span id= "charges"></span><br>

Total Amount Due: $<span id="total"></span><br>
<script>

    // GET data VIA localStorage
    document.querySelector("#Shopamount").textContent = window.localStorage.getItem("sum");
    document.querySelector("#TaxTotal").textContent = window.localStorage.getItem("taxTotal");
    document.querySelector("#charges").textContent = window.localStorage.getItem("shipping");
    document.querySelector("#total").textContent = window.localStorage.getItem("due");


    // GET SUM VIA query string
    let queryString = document.location.search;
    let sum = queryString.split("=")[1];
    let taxTotal = queryString.split("=")[1];
    let shipping = queryString.split("=")[1];
    let due = queryString.split("=")[1];

    document.querySelector("#Shopamount").textContent = sum;
    document.querySelector("TaxTotal").textContent = taxTotal;
    document.querySelector("charges").textContent = shipping;
    document.querySelector("total").textContent = due;
</script>

目标是将其打印在Checkout.html中，但我已经这样做了几个小时，没有任何结果。请帮忙。 [更新]：在@Kostax的帮助下，我设法显示了一些计算结果，但其中包含一些错误。

Answer 1

这是一个入门的基本设置。单击“签出”按钮后，testTable中的JS将计算总数，并将总数存储在localStorage中。然后将触发该链接，并将您重定向到结帐页面，在该页面上，从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>

[更新] ，包括通过@Jonathan Gray指出的查询字符串机制在两个页面之间传递数据的另一种方法

如何使用JavaScript从一个HTML文件读取数据并在另一个文件中显示数据

1 个答案: