Passing javascript created table from on html to another html

Question

Edit: problem solved! Credits to @Thennarasan and @SiamakFerdos ,you have my deep gratitude!

Tips: when you are not sure if you get the value you intended to, try using

console.log(your intended value)

to check for it!

I am working on project and I need to pass a table from one html to another.

Whole process:

I want to create a html file to accept a number from the user as an input to produce a multiplication table.
Create an external javascript file that should have a function to generate the multiplication table.
Javascript function should contain array variables and loops to perform the operation.
Use appropriate user message using alert method.
Call the function when the user hits Generate Table button and forward results to another html page.

The following is what I have so far:

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

I am struggling at figuring out how to forward the result to TableGetter.html. I need help on writing the TableGetter.html as well as passing the table to TableGetter.html when I click Generate Table button in Input.html

Deep gratitude!

In the Method DisplayTable(); set the data in the sessionstorage or localstorage and get the item from the storage and display in the TableGetter.html. — Thennarasan
– Thennarasan, Commented Feb 4, 2017 at 5:49
@Thennarasan I think I made some mistake in the form, it displays the table but not redirecting to TableGetter.html — Psycho Li
– Psycho Li, Commented Feb 4, 2017 at 6:13
Simple as informed using localstorage using the sample posted by @zer00ne. 2 options 1. change the button to a link and take to that page you want and in that page display the data from localstorage or 2. Use window.location.href and point where you want to take the user and display the data. — Thennarasan
– Thennarasan, Commented Feb 4, 2017 at 6:17
@Thennarasan The Ajax import is too much for newbie like me. The project asks me to do it by clicking the button on page1 and display the table generated by js on page2 — Psycho Li
– Psycho Li, Commented Feb 4, 2017 at 6:33

Siamak Ferdos · Accepted Answer · 2017-02-04 06:13:47Z

2

On TableGetter.html:

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

And change your DisplayTable function:

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

edited Feb 4, 2017 at 6:13

answered Feb 4, 2017 at 6:00

Siamak Ferdos

3,3096 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Psycho Li Over a year ago

Did I make some mistake in the form? I can display the table but the URL says its still input.html while it is supposed to jump to TableGetter.html.

Siamak Ferdos Over a year ago

You didn't redirect to new page at all! I append it to your function...

Psycho Li Over a year ago

Is there something involved with input.html? Or is there something wrong the createMultTable? Nothing displays when I reach TableGetter.html. I tested it on Firefox, and found the process has three layers. First I click the button, it display the table on input.html for less than 1 sec, then redirects me to TableGetter.html with nothing on there.

Siamak Ferdos Over a year ago

@PsychoLi There's no wrong ting here! May be it couldn't find newTabl element in TableGetter.html. Use console.log(localStorage.getItem("table_html")) to insure you can get html.

Thennarasan Over a year ago

@SiamakFerdos in the javascript we need to change the for loop as posted as a new answer other wise in localstorage it will set only "<table border='1'></table>"

|

Thennarasan · Accepted Answer · 2017-02-04 07:01:07Z

We need to make couple of changes, please exactly copy paste and check.

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

Note change the window.location.pathname of what you have.

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>

Run it, it will work as expected.

Yes! It works! Thank you for helping me so much! Can I select both of you and @Siamak as the correct answer? I just used console.log and found out my table object is incomplete. tr and td scattered everywhere...Thank you very much!

Collectives™ on Stack Overflow

Passing javascript created table from on html to another html

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related