Program
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table Print Using JavaScript </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body >
<h3>Table Printer</h3>
<form method="post">
<p><input type="number" id="tablenumber" value="" /></p>
<p><button type="button" onclick="printtable()">Table Print</button></p>
</form>
<div id="result" class="result"></div>
<script type="text/javascript">
function printtable() {
var tablenumber = document.getElementById("tablenumber").value;
try {
var table = Number(tablenumber);
if (tablenumber == 0) {
alert("Please Enter Value");
} else {
var output = "<table border='1'><thead><th>Table</th><th>Multiple</th><th>Number</th><th>Equal</th><th>Result</th></thead><tbody>";
for(var num = 1; num <= 10; num++) {
var res = table * num;
output += "<tr><td>" + table + "</td><td> x </td><td>" + num + "</td><td> = </td><td>" + res + "</td></tr>";
//Row Printing
}
output += "</tbody></table>";
document.getElementById("result").innerHTML = output;
}
} catch(err) {
}
}
</script>
</body>
</html>Explanation
Step 1. First make form with define with id. Like tablenumber.
Step 2. Button for trigger the function which check the values by using onclick=”printtable()”
Step 3. Make function name of printtable()
Step 4. Declare variable number and Get Value; Like var tablenumber = document.getElementById(“valuenumber”).value;
Step 5. Try Catch its a function which first try until not error generated,if any error generated other function Catch then Error you print cause of error.
Step 6. now Convert var table = Number(tablenumber); Number() convert any value to number.If any text its tell zero.
Step 7. Validation by if number value is zero or Null then alert(“Please Enter Value”)
step 8. By making table in loop some part of table is repeatable,such part before the loop and such part is after loop.
Step 9. for(declaration;condition;increments/decrements) in the loop repeatable content var res = table * num;
Step 10. document.getElementById(“result”).innerHTML is for display the result on div after completed.
Step 11. innerHTML is property which add text between Tags.LIKE <div id=”result”> Text </div> or <p id=”result”>Text</p>.
Demo Program
