This is my code i and it's working perfectly fine. I just wanted to print the table by using Html tables and also want to apply bootstrap on it to add borders,the multiplication table in form of an HTML TABLE with every line as a table row ‘tr’. Table should be styled by bootstrap table-bordered class.
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".0.0/css/bootstrap.min.css">
<script src=".3.1/jquery.min.js"></script>
<script src=".js/1.12.9/umd/popper.min.js"></script>
<script src=".0.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>MultiplicationTable</h2
<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button onclick="myFunction()">Print Table</button>
<p id="MT"></p>
<script>
function myFunction()
{
var text = "";
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
for (T = I; T <= E; T++) {
text += Number + "*" + T + "=" + Number*T + "<br>";
}
document.getElementById("MT").innerHTML = text;
}
</script>This is my code i and it's working perfectly fine. I just wanted to print the table by using Html tables and also want to apply bootstrap on it to add borders,the multiplication table in form of an HTML TABLE with every line as a table row ‘tr’. Table should be styled by bootstrap table-bordered class.
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>MultiplicationTable</h2
<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button onclick="myFunction()">Print Table</button>
<p id="MT"></p>
<script>
function myFunction()
{
var text = "";
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
for (T = I; T <= E; T++) {
text += Number + "*" + T + "=" + Number*T + "<br>";
}
document.getElementById("MT").innerHTML = text;
}
</script>- Please share your code. – John Willson Commented Mar 21, 2018 at 9:50
- Code is already there?? – Fazil Mahesania Commented Mar 21, 2018 at 9:57
3 Answers
Reset to default 1A simple Table using JavaScript.
Code goes here -
<!DOCTYPE html>
<html>
<head>
<title>multiplication table</title>
</head>
<body>
<script type="text/javascript">
var i, j;
var m = 1;
for (i = 1; i <= 10; i++) {
for (j = 1; j <= 10; j++) {
document.write(i * j);
}
document.write("<br/>");
}
</script>
</body>
</html>
function myFunction()
{
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
var temp="";
for (T = I; T <= E; T++) {
temp+="<tr><td>"+Number+"</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number*T +"</td></tr>";
}
$("#displayTables").append(temp);
}<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>MultiplicationTable</h2
<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button onclick="myFunction()">Print Table</button>
<table class="table table-bordered" id="displayTables">
</table>
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>MultiplicationTable</h2
<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button onclick="myFunction()">Print Table</button>
<p id="MT"></p>
<script>
function myFunction()
{
var text = "";
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
for (T = I; T <= E; T++) {
text += Number + "*" + T + "=" + Number*T + "<br>";
}
document.getElementById("MT").innerHTML = text;
}
</script>8