user3721091 user3721091 - 3 months ago 16
Javascript Question

Create table in JavaScript

Java Script Table

I am a beginer to JavaScript and trying to create a table using JavaScript. I tried like this.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p>
<label for="number">Number 1</label>
<input type="text" id="number">
</p>
<p>
<label for="multiple_limit">Multiple 1</label>
<input type="text" id="multiple_limit">
</p>
<p>
<label for="number2">Number 2</label>
<input type="text" id="number2">
</p>
<p>
<label for="multiple_limit2">Multiple 2</label>
<input type="text" id="multiple_limit2">
</p>
<p>
<button onclick="calculate_table();">Calculate Table</button>
</p>

<div id="result">
</div>
<script>
function calculate_table() {
var number = document.getElementById("number").value;
var number2 = document.getElementById("number2").value;
var multiple_limit = document.getElementById("multiple_limit").value;
var multiple_limit2 = document.getElementById("multiple_limit2").value;
var result = "<table style='border: 1px solid black;'>";

for(i = 1; i <= multiple_limit; i++) {

for(j=1; j<=multiple_limit2; j++)
{
result = result + "<tr><td>" + number + " X " + i + " = " + number * i + "</td></tr>";
result = result + "<tr><td>" + number2 + " X " + j + " = " + number2 * j + "</td></tr>";
}



}
result = result + "</table>";
document.getElementById("result") . innerHTML = result;
}
</script>
</body>
</html>


The result is not showing like what I want, it show the data in one column and repeat the data. what I am doing wrong?

Please also provide the For loop logic material or link, so I can learn from it..

Any help will be appreciated.

Answer

From your image and code example, it seems that you want to build a table where

  1. columns run from Number 1 to Number 2 (e.g. from 5 to 10), and
  2. rows run from Multiply 1 to Multiply 2 (e.g. from 3 to 7)

In order to do so, an outer loop would build each row, and an inner loop would build each column cell within each row:

for (var i = multiple_limit; i <= multiple_limit2; i++) {
    result = result + "<tr>";
    for (var j = number; j <= number2; j++) {
        result = result + "<td>" + j + " &times; " + i + " = " + (i * j) + "</td>";
    }
    result = result + "</tr>";
}

Note that the variables multiple_limit, multiple_limit2, number, and number2 need to be numbers for this to work. Thus, when reading the string values of the text inputs, they can be converted to numbers by using the unary plus operator like this:

var number = +document.getElementById("number").value;
var number2 = +document.getElementById("number2").value;
var multiple_limit = +document.getElementById("multiple_limit").value;
var multiple_limit2 = +document.getElementById("multiple_limit2").value;

A working revised demo from your code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p>
        <label for="number">Number 1</label>
        <input type="text" id="number" value="5">
    </p>
    <p>
        <label for="multiple_limit">Multiple 1</label>
        <input type="text" id="multiple_limit"  value="3">
    </p>
    <p>
        <label for="number2">Number 2</label>
        <input type="text" id="number2"  value="10">
    </p>
    <p>
        <label for="multiple_limit2">Multiple 2</label>
        <input type="text" id="multiple_limit2"  value="7">
    </p>
    <p>
        <button onclick="calculate_table();">Calculate Table</button>
    </p>

    <div id="result">
    </div>
    <script>
function calculate_table() {
    var number = +document.getElementById("number").value;
    var number2 = +document.getElementById("number2").value;
    var multiple_limit = +document.getElementById("multiple_limit").value;
    var multiple_limit2 = +document.getElementById("multiple_limit2").value;
    var result = "<table style='border: 1px solid black;'>";
    for (var i = multiple_limit; i <= multiple_limit2; i++) {
        result = result + "<tr>";
        for (var j = number; j <= number2; j++) {
            result = result + "<td>" + j + " &times; " + i + " = " + (i * j) + "</td>";
        }
        result = result + "</tr>";
    }
    result = result + "</table>";
    document.getElementById("result").innerHTML = result;
}
    </script>
</body>
</html>