编辑:问题已解决!感谢@Thennarasan 和@SiamakFerdos，我对你们深表谢意!
提示:当您不确定是否获得想要的值时，请尝试使用
console.log(your intended value)
检查一下!
<小时/>我正在开发一个项目，我需要将一个表格从一个 html 传递到另一个 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
中的生成表格按钮深表谢意!
最佳答案
在 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;
}
关于javascript - 将javascript创建的表从一个html传递到另一个html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42036950/