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

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 计算总数，一旦单击 Checkout 按钮并将总和存储在 localStorage 中。 然后链接会被触发并将您重定向到结帐页面，其中从 localStorage 检索总和值并显示在页面中。

测试表.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>

购物金额.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 );

结帐.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 指出的查询字符串机制在两个页面之间传递数据的另一种方式

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

问题描述

1 个解决方案

解决方案1
-2 2019-10-13 00:17:40

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

问题描述

1 个解决方案

解决方案1 -2 2019-10-13 00:17:40

解决方案1
-2 2019-10-13 00:17:40