CODEWITHSUNDEEP
javascripthtmlcssmultiplication
Wade Lin
Wade Lin

Reputation: 11

Multiplication Table in javascript and how about to align the row

I tried to a do Multiplication Table in JS and I want to print in <p> element out (Use DOM and not use document.write method).

I tried to use "&#9;" or "\t" to align column , but when number is double digit (from x3 column) , it got typographic issue.

Does it any ways could solve this problem?

var p1 = document.getElementById("printout");
var s = "";

for (var i = 1; i <= 9; i++) {
  for (var j = 1; j <= 9; j++) {
    s = s + j + "*" + i + " = " + (i * j) + "&#9;";
  }

  s = s + "<br>";
}

p1.innerHTML = s;
<pre id="printout"></pre>

Upvotes: 1

Views: 1301

Answers (3)

Moha the almighty camel
Moha the almighty camel

Reputation: 4463

@Dalvik method is the correct way, styling and alignment should be done through CSS.

However, in other environments like command line, or if you are doing this as an exercise to learn JS you can use string padding, here is an example:

const p1 = document.getElementById("printout");
const LONGEST_ENTRY = 9; // Longest string you will have is 9 characters long
const entries = []

        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= 9; j++) {
                const entry = `${j}*${i} = ${(i*j)}`.padEnd(LONGEST_ENTRY, " ") ; // use string interpolation, then pad the string with spaces until the length of LONGEST_ENTRY is reached
                entries.push(entry); // store all the entries in an array
            }
            entries.push("<br/>"); // add a line break at the end of each row
        }
p1.innerHTML =  entries.join(''); // join all the elements

Here is a jsfiddle as an example

Upvotes: 0

Harsh Saini
Harsh Saini

Reputation: 626

Inspiring from @Andreas suggestion, Using <table>

var p1 = document.getElementById("printout");
var s = "";
for (var i = 1; i <= 9; i++) {
  let row = document.createElement("tr");
  for (var j = 1; j <= 9; j++) {
    let col = document.createElement("td");
    col.innerText = j + "*" + i + " = " + (i * j);
    row.append(col);
  }
  p1.append(row);
}
td {
  padding: 2px 2px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <table id="printout"></table>
</body>

</html>

Upvotes: 0

Rahul
Rahul

Reputation: 5844

Instead of printing table column wise, print row wise.

And wrap your each table in a div, so that aligning them becomes easy.

var p1 = document.getElementById("printout");

var s = "";

        for (var i = 1; i <= 9; i++) {
            
                        s = s + "<div>";

            for (var j = 1; j <= 9; j++) {

                s =  s + i + "*" + j + " = " + (i*j) + "<Br/>" ;
                
            }

            s =  s + "</div>";
            
        }


        p1.innerHTML =  s;

Little bit CSS

#printout {
display:flex;
flex-wrap:wrap;
}

#printout div {
  padding:10px;
  min-width:100px
}

https://jsfiddle.net/wkg92rud/

Upvotes: 1

Related Questions