Fatal编程技术网
  • javascript/
  • 将javascript创建的表从一个html传递到另一个html

将javascript创建的表从一个html传递到另一个html

javascript html

将javascript创建的表从一个html传递到另一个html,javascript,html,Javascript,Html,编辑：问题已解决！感谢@Thennarasan和@SiamakFerdos，我深深地感谢你们 提示：如果您不确定是否获得了预期的价值，请尝试使用 console.log(your intended value) 检查一下 我在项目中工作，我需要将一个表格从一个html传递到另一个html 整个过程： 我想创建一个html文件，接受来自用户的数字作为生成乘法表的输入 创建一个外部javascript文件，该文件应具有生成乘法表的函数 Javascript函数应该包含执行操作的数组变量和循环 使

编辑：问题已解决！感谢@Thennarasan和@SiamakFerdos，我深深地感谢你们

提示：如果您不确定是否获得了预期的价值，请尝试使用

console.log(your intended value)
检查一下

我在项目中工作，我需要将一个表格从一个html传递到另一个html

整个过程：

  • 我想创建一个html文件，接受来自用户的数字作为生成乘法表的输入
  • 创建一个外部javascript文件，该文件应具有生成乘法表的函数
  • Javascript函数应该包含执行操作的数组变量和循环
  • 使用警报方法使用适当的用户消息
  • 当用户点击“生成表格”按钮时调用该函数，并将结果转发到另一个html页面
    • 以下是我目前掌握的情况：

    //这是Calculation.js
函数DisplayTable（）{
var baseNumber=parseInt（document.getElementById（“baseNumber”）.value）；
var countMult=[1,2,3,4,5,6,7,8,9,10]；
var createMultTable=“”
document.write（createMultTable）；
//这将创建表
//第一列是用户输入，第二列是从1到10的倍增，第三列是结果。
对于（变量行=0；行<10；行++）{
文件。写入（“”+“”）；
文件。写入（“”+baseNumber+“”+“”+countMult[行]+“”+“”+baseNumber*countMult[行]+“”）；
}
createMultTable+=“”；
document.write（createMultTable）；
}
document.getElementById（“newTable”）.innerHTML=createMultTable

    
乘法表
乘法表
乘法表
输入一个数字：

    
生成表

    在TableGetter.html上：
    

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

    

    
（功能（）{
document.getElementById（“newTable”）.innerHTML=localStorage.getItem（“table_html”）；
})();   

    
并更改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;
}

    

    函数显示表（）{
var baseNumber=parseInt（document.getElementById（“baseNumber”）.value）；
var countMult=[1,2,3,4,5,6,7,8,9,10]；
var createMultTable=“”
document.write（createMultTable）；
//这将创建表
//第一列是用户输入，第二列是从1到10的倍增，第三列是结果。
对于（变量行=0；行<10；行++）{
文件。写入（“”+“”）；
文件。写入（“”+baseNumber+“”+“”+countMult[行]+“”+“”+baseNumber*countMult[行]+“”）；
}
createMultTable+=“”；
setItem（“table_html”，createMultTable）；//添加此行****
var url='TableGetter.html'；//在这里写下正确的url
window.location.href=url；
}

    在TableGetter.html上：
    

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

    

    
（功能（）{
document.getElementById（“newTable”）.innerHTML=localStorage.getItem（“table_html”）；
})();   

    
并更改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;
}

    

    函数显示表（）{
var baseNumber=parseInt（document.getElementById（“baseNumber”）.value）；
var countMult=[1,2,3,4,5,6,7,8,9,10]；
var createMultTable=“”
document.write（createMultTable）；
//这将创建表
//第一列是用户输入，第二列是从1到10的倍增，第三列是结果。
对于（变量行=0；行<10；行++）{
文件。写入（“”+“”）；
文件。写入（“”+baseNumber+“”+“”+countMult[行]+“”+“”+baseNumber*countMult[行]+“”）；
}
createMultTable+=“”；
setItem（“table_html”，createMultTable）；//添加此行****
var url='TableGetter.html'；//在这里写下正确的url
window.location.href=url；
}

    我们需要做一些更改，请准确复制粘贴并检查
    

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

    

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

    

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

    

    
乘法表
乘法表
乘法表

    

    运行它，它将按预期工作。
    我们需要做一些更改，请准确复制粘贴并检查
    

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

    

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

    

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

    

    
乘法表
乘法表
乘法表

    

    运行它，它将按预期工作。
    在方法
    DisplayTable（）中
    在sessionstorage或localstorage中设置数据，并从存储器中获取项目并显示在TableGetter.html中。@然后，我想我在
    表单中犯了一些错误，它显示了表，但没有重定向到TableGetter.htmlSimple，正如使用@zer00ne发布的示例使用localstorage所通知的那样。2选择1。将按钮更改为链接并转到所需页面，然后在该页面中显示localstorage或2中的数据。使用window.location.href并指向您希望接收用户并显示数据的位置。@Narasan Ajax导入对于像我这样的新手来说太多了。项目要求我点击第1页的按钮，并在第2页的方法
    DisplayTable（）中显示js生成的表
    在sessionstorage或localstorage中设置数据，并从存储器中获取项目并显示在TableGetter.html中。@然后，我想我在
    表单中犯了一些错误，它显示了表，但没有重定向到TableGetter.htmlSimple，正如使用@zer00ne发布的示例使用localstorage所通知的那样。2选择1。将按钮更改为链接并转到所需页面，然后在该页面中显示localstorage或2中的数据。使用window.location.href并指向您希望接收用户并显示数据的位置。@Narasan Ajax导入对于像我这样的新手来说太多了。项目要求我通过单击第1页上的按钮并在第2页上显示js生成的表来完成这项工作。我是否在
    表单中犯了一些错误？我可以显示表格，但URL显示它仍然是input.html，而它应该跳转到TableGetter.html。您根本没有重定向到新页面！我把它附加到你身上