如何使用javascript打印每行5个乘法表和下一行剩余的5个乘法表？_Javascript_Html

如何使用javascript打印每行5个乘法表和下一行剩余的5个乘法表？

javascript html

如何使用javascript打印每行5个乘法表和下一行剩余的5个乘法表？,javascript,html,Javascript,Html,这是我的demo.jsp页面。对于这段代码，我将在单行中获得结果，但我需要在每行打印5个表，在第二行中打印剩余的5个乘法表，反之亦然。我可以在哪里更改代码以获得预期的结果 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JavaScript Tables</title>

这是我的demo.jsp页面。对于这段代码，我将在单行中获得结果，但我需要在每行打印5个表，在第二行中打印剩余的5个乘法表，反之亦然。我可以在哪里更改代码以获得预期的结果

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JavaScript Tables</title>
        <script>
            function getResult() {
                var output;
                var tableStart = "<table>";
                var tableEnd = "</table>";
                var trStart = "<tr>";
                var trEnd = "</tr>";
                var tdStart = "<td>";
                var tdEnd = "</td>";
                var firstValue = document.getElementById("first").value;
                //alert(firstValue);
                var secondValue = document.getElementById("second").value;
                //alert(secondValue);
                if (firstValue < secondValue) {
                    //alert(secondValue);
                    document.write(tableStart);
                    document.write(trStart);
                    for (var k = firstValue; k <= secondValue; k++) {
                        document.write(tdStart);
                        document.write(tableStart);
                        document.write(trStart);
                        document.write(tdStart);
                        document.write(k + ":table");
                        document.write(tdEnd);
                        document.write(trEnd);
                        for (var i = 1; i <= 10; i++) {
                            output = k * i;
                            document.write(trStart);
                            document.write(tdStart);
                            document.write(k + "*" + i + "=" + output);
                            document.write(tdEnd);
                            document.write(trEnd);
                        }
                        document.write(tableEnd);
                        document.write(tdEnd);
                    }
                    document.write(trEnd);
                    document.write(tableEnd);
                    document.close();
                }
                else {
                    //alert(secondValue);
                    alert("Ending table should be higher number");
                }
            }
        </script>
    </head>
    <body>
        <%
            out.println("<table>");
            out.println("<tr><td>Starting Number");
            out.println("</td><td>Ending Number</td></tr>");
            out.println("<tr><td>");
            out.println("<input type='text' id='first'>");
            out.println("</td><td>");
            out.println("<input type='text' id='second'>");
            out.println("</td></tr>");
            out.println("<tr><td align='right'>");
            out.println("<input type='button' value='Get Tables' onclick='getResult()'");
            out.println("</td></tr>");
            out.println("</table>");
        %>
    </body>
</html>


JavaScript表
函数getResult（）{
var输出；
var tableStart=“”；
var tableEnd=“”；
var trStart=“”；
var趋势=”；
var tdStart=“”；
var tdEnd=“”；
var firstValue=document.getElementById（“first”）.value；
//警报（第一值）；
var secondValue=document.getElementById（“second”）.value；
//警报（第二值）；
如果（第一个值<第二个值）{
//警报（第二值）；
document.write（表启动）；
文件写入（trStart）；
对于（var k=第一个值；k

您需要将循环再嵌套一级。有一个新的外部循环，以5步为单位从开始到结束递增

。然后

循环从

到当前行的结尾或结束值，以先到者为准

函数getResult（）{
var输出；
var tableStart=“”；
var tableEnd=“”；
var trStart=“”；
var趋势=”；
var tdStart=“”；
var tdEnd=“”；
var firstValue=parseInt（document.getElementById（“first”）.value，10）；
//警报（第一值）；
var secondValue=parseInt（document.getElementById（“second”）.value，10）；
//警报（第二值）；
如果（第一个值<第二个值）{
//警报（第二值）；
document.write（表启动）；
对于（var j=firstValue；j），请学习现代Javascript技术，例如document.createElement（）
，而不是使用document.write（）
。ok@Barmar，请告诉我在哪里更改当前代码以获得预期结果。使用两个进行循环。开始一行，从1循环到5，结束该行，开始一个新行，从6循环到10循环，结束该行。如果我输入了起始表：2和结束表：15，则每5个乘法表必须开始一行，c请您修改我的代码，我是javascript新手。您确定要将所有内容都放在一行中吗？您正在为i
循环编写trStart
和trEnd，因此每次乘法都将在不同的行上。
function getResult() {
    var output;
    var tableStart = "<table>";
    var tableEnd = "</table>";
    var trStart = "<tr>";
    var trEnd = "</tr>";
    var tdStart = "<td>";
    var tdEnd = "</td>";
    var firstValue = parseInt(document.getElementById("first").value, 10);
    //alert(firstValue);
    var secondValue = parseInt(document.getElementById("second").value, 10);
    //alert(secondValue);
    if (firstValue < secondValue) {
        //alert(secondValue);
        document.write(tableStart);
        for (var j = firstValue; j <= secondValue; j += 5) {
            document.write(trStart);
            for (var k = j; k <= Math.min(secondValue, j+4); k++) {
                document.write(tdStart);
                document.write(tableStart);
                document.write(trStart);
                document.write(tdStart);
                document.write(k + ":table");
                document.write(tdEnd);
                document.write(trEnd);
                for (var i = 1; i <= 10; i++) {
                    output = k * i;
                    document.write(trStart);
                    document.write(tdStart);
                    document.write(k + "*" + i + "=" + output);
                    document.write(tdEnd);
                    document.write(trEnd);
                }
                document.write(tableEnd);
                document.write(tdEnd);
            }
            document.write(trEnd);
        }
        document.write(tableEnd);
        document.close();
    } else {
        //alert(secondValue);
        alert("Ending table should be higher number");
    }
}