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

Question

I have one HTML file that contains a table with items and their price.我有一个 HTML 文件，其中包含一个包含项目及其价格的表。 I successfully got the javascript working to traverse the table and calculate the sum of the prices, but only when it's inside the same html file.我成功地让 javascript 能够遍历表格并计算价格总和，但前提是它位于同一个 html 文件中。 I would like to display this calculation in a separate html file and I'm having trouble doing so.我想在单独的 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>

The goal is to get it to print in Checkout.html but I've been at this for hours with no results.目标是让它在 Checkout.html 中打印，但我已经做了几个小时没有结果。 please help.请帮忙。 [UPDATE]: After some help from @Kostax, I managed to get some of the calculations displayed, but it's mixed with some bugs. [更新]：在@Kostax 的帮助下，我设法显示了一些计算，但它与一些错误混合在一起。

Answer 1

Here's a basic setup to get you started.这是帮助您入门的基本设置。 The JS in testTable, calculates the total, once the Checkout button is clicked and stores the sum in localStorage. testTable 中的 JS 计算总数，一旦单击 Checkout 按钮并将总和存储在 localStorage 中。 The link then gets triggered and redirects you to the checkout page, where the sum value is retrieved from localStorage and displayed in the page.然后链接会被触发并将您重定向到结帐页面，其中从 localStorage 检索总和值并显示在页面中。

testTable.html :测试表.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 :购物金额.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 ：

<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 ] to include another way of passing data between two pages via the query string mechanism as pointed out by @Jonathan Gray [ 更新 ]包括通过@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