CODEWITHSUNDEEP
javascripthtml
tajMahal
tajMahal

Reputation: 418

How to print 5 multiplication tables per row and remaining 5 in next row using javascript?

This is my demo.jsp page.for this code i'm getting result in single row but i need to print 5 tables per row,remaining 5 multiplication table in second row,vice-versa.where can i change the code to get expected result.

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

Upvotes: 2

Views: 1434

Answers (1)

Barmar
Barmar

Reputation: 781726

You need to nest your loops one more level. There's a new, outer loop that increments j from start to end in steps of 5. Then the k loop goes from j to the end of the current row or the ending value, whichever comes first.

DEMO

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");
    }
}

Upvotes: 1

Related Questions