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

Question

这是我的代码，工作正常。 我只是想使用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> 

Answer 1

使用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>

Answer 2

 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>