This is an old revision of the document!

Multiplication Table Generator

This is a simple script to print a multiplication table generator using simple java script and html. Ex:

1	2	3
2	4	6
3	6	9

All code js + html in the same file:

index.html

<!DOCTYPE html>
<html>
    <head>
        <script>
 
            function createMultiplicationTable(rows, columns) {
                let html = '<table>';
 
                for(let rowNumber = 1; rowNumber <= rows; rowNumber++) {
                    html = html + '<tr>';
 
                    for(let columnNumber = 1; columnNumber <= rows; columnNumber++) {
                        html = html + `<td>${rowNumber * columnNumber}</td>`;
                    }
 
                    html = html + '</tr>';
                }
 
 
                html = html + '</table>';
                return html;
            } 
 
            function onGeneratePressed() {
                let rowsInput = document.getElementById("rows-input").value;
                let columnsInput = document.getElementById("columns-input").value;
 
                let rows = Number(rowsInput);
                let columns = Number(columnsInput);
 
                if (isNaN(rows) || isNaN(columns)) {
                    alert("Invalid input! Please enter numbers only.");
                    return;
                }
 
                let tableHTML = createMultiplicationTable(rows, columns);
 
                document.getElementById("table-container").innerHTML = tableHTML;
            }
        </script>
    </head>
    <body>
        <h1>Multiplication Table Generator</h1>
        <label>
            Number of rows: <input id = "rows-input" type="text">
        </label>
        <label>
            Number of columns: <input id = "columns-input" type="text">
        </label>
        <button onclick="onGeneratePressed()">Generate</button>
        <div id="table-container"></div>
    </body>
</html>

Js code separated from html code:

index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="generateTable.js"></script>
    </head>
    <body>
        <h1>Multiplication Table Generator</h1>
        <label>
            Number of rows: <input id = "rows-input" type="text">
        </label>
        <label>
            Number of columns: <input id = "columns-input" type="text">
        </label>
        <button onclick="onGeneratePressed()">Generate</button>
        <div id="table-container"></div>
    </body>
</html>

generateTable.js

function createMultiplicationTable(rows, columns) {
    let html = '<table>';
 
    for(let rowNumber = 1; rowNumber <= rows; rowNumber++) {
        html = html + '<tr>';
 
        for(let columnNumber = 1; columnNumber <= rows; columnNumber++) {
            html = html + `<td>${rowNumber * columnNumber}</td>`;
        }
 
        html = html + '</tr>';
    }
 
 
    html = html + '</table>';
    return html;
} 
 
function onGeneratePressed() {
    let rowsInput = document.getElementById("rows-input").value;
    let columnsInput = document.getElementById("columns-input").value;
 
    let rows = Number(rowsInput);
    let columns = Number(columnsInput);
 
    if (isNaN(rows) || isNaN(columns)) {
        alert("Invalid input! Please enter numbers only.");
        return;
    }
 
    let tableHTML = createMultiplicationTable(rows, columns);
 
    document.getElementById("table-container").innerHTML = tableHTML;
}