傳遞JavaScript創建的表格從HTML到另一個HTML

編輯：問題解決了！感謝@Thennarasan和@SiamakFerdos，您對我深表感謝！傳遞JavaScript創建的表格從HTML到另一個HTML

提示：，當你不知道，如果你得到你打算值，請嘗試使用

console.log(your intended value)

檢查吧！

我工作的項目，我需要從一個HTML傳遞一個表到另一個。

全過程：

我想創建一個HTML文件，以接受來自用戶的數量作爲輸入，產生乘法表。
創建一個外部JavaScript文件，該文件應該具有生成乘法表的功能。
Javascript函數應該包含數組變量和循環來執行操作。
使用警報方法使用適當的用戶消息。
當用戶點擊時調用該函數生成表按鈕並將結果轉發到另一個html頁面。

以下是我迄今爲止：

//This is the Calculation.js 
 

 
function DisplayTable() { 
 
    var baseNumber = parseInt(document.getElementById("baseNumber").value); 
 
    var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
 

 

 
    var createMultTable = "<table border='1'>" 
 
    document.write(createMultTable); 
 

 
    //This will create the table 
 
    //First column is user input, second column is multplier from 1 to 10, third column is results. 
 
    for (var row = 0; row < 10; row++) { 
 
    document.write('<tr>' + '</tr>'); 
 
    document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>'); 
 
    } 
 
    createMultTable += "</table>"; 
 
    document.write(createMultTable); 
 
} 
 

 
document.getElementById("newTable").innerHTML = createMultTable;

<!DOCTYPE html> 
 
<html> 
 
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html --> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <title>Multiplication Table</title> 
 
    <link rel="stylesheet" href="Style.css" /> 
 
    <script src="modernizr.custom.05819.js"></script> 
 
    <script type="text/javascript" src="Calculation.js"></script> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    Multiplication Table 
 
    </header> 
 

 
    
 
    <article> 
 
    <h2>Multiplication Table</h2> 
 
    <form method="link" id="newTable" action="TableGetter.html"> 
 
     Enter a number: 
 
     <input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!"> 
 
     <br> 
 
     <!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> --> 
 
     <button type="button" name="button" onclick="DisplayTable();">Generate Table</button> 
 
    </form> 
 
    </article> 
 
</body> 
 

 
</html>

我揣摩如何轉發結果TableGetter.html掙扎。我需要寫TableGetter.html以及傳遞表TableGetter.html幫助，當我點擊生成表格按鈕Input.html

深深的謝意！

來源

2017-02-04 Psycho Li

在Method DisplayTable（）;中設置sessionstorage或localstorage中的數據，並從存儲中獲取該項目並顯示在TableGetter.html中。 – Thennarasan

@Thennarasan我認爲我在'form'中犯了一些錯誤，它顯示了表格，但沒有重定向到TableGetter.html –

使用@ zer00ne發佈的示例使用localstorage進行通知很簡單。 2選項1.將按鈕更改爲鏈接並轉至所需的頁面，並在該頁面顯示localstorage中的數據，或者2.使用window.location.href並指向您要取用戶並顯示數據的位置。 – Thennarasan

我們需要做一些改動，請準確複製粘貼和檢查。

calculation.js

function DisplayTable() { 
var baseNumber = parseInt(document.getElementById("baseNumber").value); 
var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
var createMultTable = "<table border='1'>" 
document.write(createMultTable); 
//This will create the table 
//First column is user input, second column is multplier from 1 to 10, third column is results. 
for (var row = 0; row < 10; row++) {  
    createMultTable += '<tr><td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td></tr>';  

} 
createMultTable += "</table>"; 
localStorage.setItem("table_html", createMultTable);//ADD THIS LINE**** 

var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL 
window.location.href = url; 
} 

if (window.location.pathname == "/C:/Users/Thennarasan/Desktop/js/TableGetter.html"){ 
var data = localStorage.getItem("table_html"); 
document.getElementById("newTable").innerHTML = data; 
}

注意的變化是否有什麼這個window.location.pathname。

input.html

<!DOCTYPE html> 
<html> 
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html --> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Multiplication Table</title> 
<link rel="stylesheet" href="Style.css" /> 
<script src="modernizr.custom.05819.js"></script> 
<script type="text/javascript" src="Calculation.js"></script> 
</head> 
<body> 
<header> 
Multiplication Table 
</header> 
<article> 
<h2>Multiplication Table</h2> 
<form method="link" id="newTable" action="TableGetter.html"> 
    Enter a number: 
    <input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!"> 
    <br> 
    <!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> --> 
    <button type="button" name="button" onclick="DisplayTable();">Generate Table</button> 
</form> 
</article> 
</body> 

</html>

TableGetter.html

<!DOCTYPE html> 
<html> 
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html --> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Multiplication Table</title> 
<link rel="stylesheet" href="Style.css" /> 
<script src="modernizr.custom.05819.js"></script> 
</head> 
<body> 
<header> 
Multiplication Table 
</header> 
<article> 
<h2>Multiplication Table</h2> 
<div id="newTable"></div> 
</article> 
<script type="text/javascript" src="Calculation.js"></script> 
</body> 
</html>

運行它，因爲預期它會工作。

來源

2017-02-04 07:01:07 Thennarasan

是的！有用！謝謝你幫助我這麼多！我可以選擇你和@Siamak作爲正確答案嗎？我只用了console.log，發現我的表格對象不完整。到處都是'tr'和'td' ......非常感謝！ –

是的，你可以同時選擇是.. – Thennarasan

在TableGetter.html：

<script> 
    (function() { 
     document.getElementById("newTable").innerHTML = localStorage.getItem("table_html"); 
    })(); 
</script>

，改變你的DisplayTable功能：

function DisplayTable() { 
    var baseNumber = parseInt(document.getElementById("baseNumber").value); 
    var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 


    var createMultTable = "<table border='1'>" 
    document.write(createMultTable); 

    //This will create the table 
    //First column is user input, second column is multplier from 1 to 10, third column is results. 
    for (var row = 0; row < 10; row++) { 
    document.write('<tr>' + '</tr>'); 
    document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>'); 
    } 
    createMultTable += "</table>"; 

    localStorage.setItem("table_html", createMultTable);//ADD THIS LINE**** 

    var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL 
    window.location.href = url; 
}

來源

2017-02-04 06:00:32

我在「表單」中犯了一些錯誤嗎？我可以顯示錶格，但是URL說明它仍然是input.html，而它應該跳轉到TableGetter.html。 –

你沒有重定向到新頁面！我將它追加到你的函數中... –

input.html是否有涉及的內容？或者'createMultTable'有錯嗎？當我到達TableGetter.html時什麼都不顯示。我在Firefox上測試過它，發現這個過程有三層。首先，我點擊按鈕，它會在input.html上顯示少於1秒的表格，然後將我重定向到TableGetter.html，其中沒有任何內容。 –

傳遞JavaScript創建的表格從HTML到另一個HTML

回答

相關問題