如何使用 html 表打印乘法表（代码在 Javascript 中）？答案

【问题标题】：How to print Multiplication Table by using html tables (Code is in Javascript)?如何使用 html 表打印乘法表（代码在 Javascript 中）？
【发布时间】：2018-08-30 08:57:53
【问题描述】：

这是我的代码 i，它运行良好。我只是想通过使用 Html 表格来打印表格，并且还想在其上应用引导程序以添加边框，以 HTML TABLE 形式的乘法表，每行作为表格行“tr”。表应由引导表边界类设置样式。

<!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>

【问题讨论】：

请分享您的代码。
代码已经存在？？

标签： javascript html css html-table bootstrap-4

【解决方案1】：

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>

【讨论】：

是的，这行得通，但是桌子吃的只是静态和简单的，而且表格边框不起作用我想像

【解决方案2】：

使用 JavaScript 的简单表格。

代码放在这里 -

<!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>

【讨论】：