Search code examples
javascripthtmlcsshtml-tablebootstrap-4

How to print Multiplication Table by using html tables (Code is in Javascript)?

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.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/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>

Solution 

  • 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.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/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>