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

Question

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'. 我只是想使用HTML表格打印表格，并且还想在其上应用引导程序以添加边框，即以HTML TABLE形式将乘法表与每一行都作为表格行“ 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>

Answer 1

A simple Table using JavaScript. 使用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>

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>

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

问题描述

2 个解决方案

解决方案1
1 2019-05-02 13:09:59

解决方案2
0 已采纳 2018-03-21 10:04:49

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

问题描述

2 个解决方案

解决方案1 1 2019-05-02 13:09:59

解决方案2 0 已采纳 2018-03-21 10:04:49

解决方案1
1 2019-05-02 13:09:59

解决方案2
0 已采纳 2018-03-21 10:04:49