I am trying to generate multiplication tables in JavaScript and pass the values to the rows of a table in html. I want an output like the image shown. Can anyone help me with this. I'm new to Javascript and am trying to figure out some of the basics. Thanks.
<html>
<head>
<title>Multiplication Table Generator</title>
<script language="javascript" type="text/javascript">
function generateTable()
{
var myVar = prompt("A number?", "");
var myVar = multTables.number.value;
var myString = "";
for (i=1; i<=myVar; i++) {
myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
}
}
</script>
</head>
<body>
<h1>Times Tables</h1>
<form name="multTables">
Enter a number<input type=text name="number">
<input type=button name="button1" value="Show Table" onclick="generateTable()">
<table border=1>
<tr><th>times tables</th></tr>
<tr><td>
<!-- 1X7, 2X7...etc-->
</td>
<td>
<!-- 7, 14, 21...etc-->
</td>
</tr>
</table>
</form>
</body>
</html>
I am trying to generate multiplication tables in JavaScript and pass the values to the rows of a table in html. I want an output like the image shown. Can anyone help me with this. I'm new to Javascript and am trying to figure out some of the basics. Thanks.
<html>
<head>
<title>Multiplication Table Generator</title>
<script language="javascript" type="text/javascript">
function generateTable()
{
var myVar = prompt("A number?", "");
var myVar = multTables.number.value;
var myString = "";
for (i=1; i<=myVar; i++) {
myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
}
}
</script>
</head>
<body>
<h1>Times Tables</h1>
<form name="multTables">
Enter a number<input type=text name="number">
<input type=button name="button1" value="Show Table" onclick="generateTable()">
<table border=1>
<tr><th>times tables</th></tr>
<tr><td>
<!-- 1X7, 2X7...etc-->
</td>
<td>
<!-- 7, 14, 21...etc-->
</td>
</tr>
</table>
</form>
</body>
</html>
- 3 Do you understand the basics of creating html elements in Javascript? I ask so I get a sense for what level of understanding you currently have of what needs to be done here – thatidiotguy Commented Apr 15, 2014 at 15:27
- Try creating a Table with an id. Then append the table rows as children. Keeping references to them in an array. Then create two utility functions to generate the left column values and right column values respectively. Update the innerHtml of the elements when the button is clicked. – Joe Commented Apr 15, 2014 at 15:29
- yeah-I have a good understanding of html. I know how to generate tables etc but it's more mapping the results from Javascript back to populate these tables that I am having a problem with. Thanks – kellzer Commented Apr 15, 2014 at 15:29
- @NiallKelly What you need to do then is create the table element in Javascript and populate it in the for loop you already have. You can then insert the table element into the DOM. If that does not make sense I can provide an example. – thatidiotguy Commented Apr 15, 2014 at 15:30
- @thatidiotguy Thanks a lot for your help. If you have an example that you can point me to and it's not much hassle that would be great! Thanks – kellzer Commented Apr 15, 2014 at 15:40
4 Answers
Reset to default 2I don't understand why you are using html form and js prompt at the same time.
Ok, you can use this :
<html>
<head>
<title>Multiplication Table Generator</title>
<script language="javascript" type="text/javascript">
function generateTable()
{
//var myVar = prompt("A number?", "");
var myVar = document.forms.multTables.x.value;
var myString = "<tr><th>"+ myVar + " times tables</th></tr>";
for (i=1; i<=myVar; i++)
{
myString += "<tr><td>";
myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
myString += "</td></tr>";
}
document.getElementById('t').innerHTML = myString;
return false;
}
</script>
</head>
<body>
<h1>Times Tables</h1>
<form name="multTables">
Enter a number<input type="text" name="number" id="x">
<input type="button" name="button1" value="Show Table" onclick="generateTable()">
<table border="1" id="t">
</table>
</form>
</body>
</html>
Okay so I set up a small example here that should give you a nice example of how to do this:
http://jsfiddle/MHfyE/
HTML:
<div id="content">
</div>
<button id="button">Do It!</button>
Javascript:
var buttonElt = document.getElementById("button");
buttonElt.onclick = function() {
var elt = document.createElement("div");
for (var i = 0; i < 10; i++) {
var childElt = document.createElement("p");
childElt.innerHTML = i;
elt.appendChild(childElt);
}
var parentElt = document.getElementById("content");
parentElt.appendChild(elt);
}
I feel like this is enough to get you started.
First, you're overwriting myVar right after asking it in the prompt, doesn't make much sense.
var myVar = prompt("Give me my var!");
console.log(myVar);
Then you'll somehow have to generate the HTML, you can do it by using jQuery and appending elements or vanilla JS or just generating the raw HTML string. Or using something like AngularJS's ng-repeat.
Here's a really simple example:
var table = document.createElement("table");
for (var i = 0; i < 10; i += 1) {
var tableRow = document.createElement("tr");
for (var j = 0; j < 10; j += 1) {
var tableCell = document.createElement("td");
tableCell.innerHTML = i * j;
tableRow.appendChild(tableCell);
}
table.appendChild(tableRow);
}
Fiddle: http://jsfiddle/jbNbs/1/
Here is a simple example .... This way, the table is NOT generated by the JavaScript. JavaScript fills the cell data. Enter a number in the box, hit enter If the entry is not a number, it will reject it (won't do anything)
The JavaScript
function generateTable(n) {
n = parseInt(n); // convert to integer
if (!n) { return; } // end execution if not found
// get all the tr in the table
var tr = document.querySelectorAll('#timesTable tr');
tr[0].children[0].textContent = n + ' Times Table';
for (var i = 1; i <= 9; i++) {
tr[i].children[0].textContent = i + ' x ' + n + ' =';
tr[i].children[1].textContent = i * n;
}
}
The HTML
Enter a number: <input type="text" id="box" onchange="generateTable(this.value);">
<br /><br />
<h1>Times Tables</h1>
<table id="timesTable" border="1">
<tr><th colspan="2">Times Table</th></tr>
<tr><td style="width: 100px;"> </td><td style="width: 50px;"> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
Good luck :)