JavaScript Multiplication Table is a multiplication table for any number.
Using JavaScript we program and generate 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 user.
- Create a button to submit value
- on button click call the multiplicationTable() function.
- function will get value of text box
- loop to generate multiplication table.
- print the data in html page.
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 | <!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> |

Generating Multiplication table in Range
Here user will enter range to generate multiplication table if user enters 1 and 10 then 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 50 51 52 53 54 | <!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> |

Read More