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

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

javascript html

如何使用JavaScript从一个HTML文件读取数据并在另一个HTML文件中显示,javascript,html,Javascript,Html,我有一个HTML文件，其中包含一个包含项目及其价格的表。我成功地让javascript遍历表并计算价格之和，但仅当它位于同一html文件中时。我想在一个单独的html文件中显示这个计算结果，但这样做有困难 //testTable.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style> table, th, td { border: 1px solid

我有一个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>

//testTable.html
表，th，td{
边框：1px纯黑；
}
Html表格
项目名称
量
价格
iPhoneX
10
299.99
苹果手表3
12
250
MacBookPro 13“
7.
1199.99

//ShoppingAmount.js
函数getCheckoutAmounts（）
{ 
var table=document.getElementById（'EstoreTable'）；//来自TestTable.html的数据
var总和=0，
taxTotal=0，
税款=.0825，
航运=5.99，
到期日=0；
对于（变量i=1；i


//Checkout.html
结账
购物总额：$

总税额：$

总运费：$

应付总额：$

//通过本地存储获取数据
document.querySelector（“#Shopamount”）.textContent=window.localStorage.getItem（“总和”）；
document.querySelector（“#TaxTotal”）.textContent=window.localStorage.getItem（“TaxTotal”）；
document.querySelector（“费用”）.textContent=window.localStorage.getItem（“发货”）；
document.querySelector（“#total”）.textContent=window.localStorage.getItem（“到期”）；
//通过查询字符串获取和
让queryString=document.location.search；
设sum=queryString.split（“=”[1]；
让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（“费用”）.textContent=shipping；
document.querySelector（“total”）.textContent=到期；

我们的目标是让它在Checkout.html中打印出来，但我已经做了几个小时了，没有结果。请帮助。
[更新]：在@Kostax提供了一些帮助后，我设法显示了一些计算结果，但其中夹杂着一些错误。
这里是一个基本的设置，可以让您开始使用。单击“签出”按钮后，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>

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>
<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>


桌子
th，
运输署{
边框：1px纯黑；
}
Html表格
项目名称
量
价格
iPhoneX
10
299.99
苹果手表3
12
250
MacBookPro 13“
7.
1199.99

ShoppingAmount.js：
<!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>

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>
<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>

函数getShoppingAmount（e）{
var table=document.getElementById（'EstoreTable'）；//来自TestTable.html的数据
var总和=0；
对于（变量i=1；i

Checkout.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>

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>
<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>


结账
购物总额：
//通过本地存储获取和
document.querySelector（“#Shopamount”）.textContent=window.localStorage.getItem（“总和”）；
//通过查询字符串获取和
让queryString=document.location.search；
设sum=queryString.split（“=”[1]；
document.querySelector（“#Shopamount”）.textContent=sum；

[更新]包括另一种通过@Jonathan Gray所指出的查询字符串机制在两个页面之间传递数据的方式
您是否考虑过使用Cookie或localStorage存储计算值并从不同页面访问它？仅供参考，以下是localStorage文档：一旦计算了表值，您打算如何重定向用户？@KostasX这些页面通过主页链接。该表充当购物车。该表如何更新@这是对LocalStorages的不当使用。这只是开始使用LocalStorages的一个基本示例。请随时详细说明它的不当使用原因，并相应地编辑代码@jonathangray使用localStorage在“页面”之间传递数据等同于将数据存储在全局变量中在函数之间传递数据。你引入了不可预见的后果的可能性。更糟糕的是，你将数据存储在一个磁盘上，而它根本不需要触摸。更好的方法是使用查询字符串传递数据。不过，您提到的查询字符串解决方案也是一种不错的方法。请随意添加您的答案@JonathanGray@KostasX这可以作为多个实例来完成吗？就像我想要的那样