JavaScript Multiplication Table is a multiplication table for any number.
Using JavaScript we program and generate a multiplication table of any number.
Java multiplication table generation using for loop is developed as below
- Create a text box to get a number from the user.
- Create a button to submit value
- on the button click to call the multiplicationTable() function.
- the function will get the value of the text box
- loop to generate a multiplication table.
- print the data on an HTML page.
Example Multiplication table javascript user input
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <style> #mtable { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 30%; } #mtable td, #mtable th { border: 1px solid #ddd; padding: 8px; } #mtable tr:nth-child(even){background-color: #FFF8DC;} #mtable tr:hover {background-color: #F5DEB3;} </style> </head> <body> <h2>Generate Table</h2> <label>Enter Number</label> <input type="number" id="number" /> <input type="button" value="generate" onclick="multiplicationTable()" /> <br /><br /><br /> <div id="result"></div> <script> function multiplicationTable() { var table; table='<table id="mtable">'; var num=document.getElementById("number").value; if(num==null || num=="") num=5; for(i=1;i<=10;i++){ table+='<tr><td>'+num+'*'+i+'='+num*i+'</td></tr>'; } table+='</table>'; document.getElementById("result").innerHTML = table; } </script> </body> </html> |
Multiplication table in javascript Example: Multiplication table in Range
Here user will enter the range to generate a multiplication table if the user enters 1 and 10 then a multiplication table from 1 to 10 is generated.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <style> #mtable { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 30%; } #mtable td, #mtable th { border: 1px solid #ddd; padding: 8px; } #mtable tr:nth-child(even){background-color: #FFF8DC;} #mtable tr:hover {background-color: #F5DEB3;} </style> </head> <body> <h2>Generate Tables</h2> <label>Number1</label> <input type="number" id="number1" /> <label>Number2</label> <input type="number" id="number2" /> <input type="button" value="generate" onclick="multiplicationTable()" /> <br /><br /><br /> <div id="result"></div> <script> function multiplicationTable() { var table; table='<table id="mtable">'; var num1=document.getElementById("number1").value; var num2=document.getElementById("number2").value; if(num1==null || num1=="") num1=1; if(num2==null || num2=="") num2=10; for(i=1;i<=10;i++){ table+='<tr>'; for(num=num1;num<=num2;num++){ table+='<td>'+num*i+'</td>'; } table+='</tr>'; } table+='</table>'; document.getElementById("result").innerHTML = table; } </script> </body> </html> |

Create an html page with the sole purpose to show multiplication tables of 2 to 10 (row-wise) created by JavaScript. initially, the page is blank. with help of set interval function print a row every 5 seconds in different colors and increasing font size.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2>Multiplication Tables</h2> <br /><br /><br /> <div id="result"></div> <script> var num1=2; var num2=10; var row=1; var fontSize=100; var interval; const color = ["#FFC1CF", "#E8FFB7", "E2A0FF","#C4F5FC","#B7FFD8","#eaac8b","#b56576","#","#fee440","#e8e8e4","#5a189a","#b1a7a6","#4361ee","#7209b7","#c4fff9","#1f7a8c","#f4845f","#eae0d5","#aeb4a9","#a6808c"]; var table = document.createElement('table'); table.setAttribute('class', 'table table-hover'); if(row==1){ var tr = document.createElement('tr'); for(var num=num1;num<=num2;num++){ var td = document.createElement('td'); var textNode=document.createTextNode('Table of '+num); td.appendChild(textNode); tr.appendChild(td); } table.appendChild(tr); document.body.appendChild(table); } interval=setInterval(multiplicationTable,1000); function multiplicationTable() { console.log(num1+" "+num2+" "+row); var tr = document.createElement('tr'); for(num=num1;num<=num2;num++){ var td = document.createElement('td'); var textNode=document.createTextNode(num*row); td.appendChild(textNode); tr.appendChild(td); tr.style.backgroundColor = color[row]; td.style.fontSize = fontSize+'%'; fontSize+=0.5; } table.appendChild(tr); row++; if(row>20){ console.log("row is"+row); clearInterval(interval); } } </script> </body> </html> |
Read More
- Get multiple checkbox value in javascript
- Add active class onclick
- isPrime() Javascript : Prime number program
- Form Handling and Validation
- Try Catch and Finally in JavaScript
- Math Object in JavaScript