I have a simple multiplication table in JavaScript with two nested for loops:

var result = '\n';
for (var i = 1; i < 11; i++) {
    for (var j = 1; j < 11; j++) {
        result += (i*j) + ' ';
    }
    result += '\n'
}

The first position is 1, but I want it to start with an empty first position, or an "X" for example, so that the result of 1 * 1 is also displayed like here

I have a simple multiplication table in JavaScript with two nested for loops:

var result = '\n';
for (var i = 1; i < 11; i++) {
    for (var j = 1; j < 11; j++) {
        result += (i*j) + ' ';
    }
    result += '\n'
}

The first position is 1, but I want it to start with an empty first position, or an "X" for example, so that the result of 1 * 1 is also displayed like here

• javascript
• loops

• The result should be printed in console in that format or you want to show that in browser? – Tushar Commented Jan 4, 2017 at 14:01
• I am not getting it, you want it in a table ? – Flying Gambit Commented Jan 4, 2017 at 14:01
• You can define var result = 'X '; The loop is appending to result – Maxim Shoustin Commented Jan 4, 2017 at 14:01
• 1 For console output, result += ' '.repeat(3 - (i * j).toString().length) + (i * j) + ' '; – Tushar Commented Jan 4, 2017 at 14:03
• Yes, I want it to look like a table but do not want to involve HTML here in order to keep it simple. Tushar, the jsfiddle example outputs the same as what I have. – StarflameDia Commented Jan 4, 2017 at 14:07

6 Answers 6

var result = 'x ';
for (var i = 0; i < 11; i++) {

    for (var j = 0; j < 11; j++) {

        if(i == 0 && j > 0){
          result += '[' + j + ']';
        } 
        else if(j == 0 && i>0){
          result += '[' + i + '] ';
        } 
        else if(i>0 && j>0){
        result += (i*j) + ' ';
        }
    }
    result += '\n'
}

console.log(result);

Output:

x [1][2][3][4][5][6][7][8][9][10]
[1] 1 2 3 4 5 6 7 8 9 10 
[2] 2 4 6 8 10 12 14 16 18 20 
[3] 3 6 9 12 15 18 21 24 27 30 
[4] 4 8 12 16 20 24 28 32 36 40 
[5] 5 10 15 20 25 30 35 40 45 50 
[6] 6 12 18 24 30 36 42 48 54 60 
[7] 7 14 21 28 35 42 49 56 63 70 
[8] 8 16 24 32 40 48 56 64 72 80 
[9] 9 18 27 36 45 54 63 72 81 90 
[10] 10 20 30 40 50 60 70 80 90 100 

for better printing:

var result = ' x   ';

function buff(val){
  var buff = '';
  var pad = 4 - val;
    while( pad-- > 0 )
            buff += ' ';            
  return buff;
}

for (var i = 0; i < 11; i++) {

    for (var j = 0; j < 11; j++) {

        if(i == 0 && j > 0){
          result += '[' + j + ']' + buff((j+'').length+2);
        } 
        else if(j == 0 && i>0){
          result += '[' + i + ']';
        } 
        else if(i>0 && j>0){
        result += buff((i*j+'').length ) + i*j;
        }
    }
    result += '\n'
}

Output:

 x   [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
[1]   1   2   3   4   5   6   7   8   9  10
[2]   2   4   6   8  10  12  14  16  18  20
[3]   3   6   9  12  15  18  21  24  27  30
[4]   4   8  12  16  20  24  28  32  36  40
[5]   5  10  15  20  25  30  35  40  45  50
[6]   6  12  18  24  30  36  42  48  54  60
[7]   7  14  21  28  35  42  49  56  63  70
[8]   8  16  24  32  40  48  56  64  72  80
[9]   9  18  27  36  45  54  63  72  81  90
[10]  10  20  30  40  50  60  70  80  90 100

document.write("<center><table border='1px'>");
for (var a = 1; a < 11; a++) {
  document.write("<tr style='height:40px'>");
  for (var b = 1; b < 11; b++) {
    document.write("<td style='width:40px'><center><font size='4'>" + a * b + "</center></font></td>");
  }
  document.write("</tr>");
}
document.write("</table></center>");

    var table = 1;
    var count = 12;
       for (var m =0; m < count; m++) {
    m++

document.write(table, "X", m, "=", table * m+'<br>');
--m
  }

I made a simple one here will display just like you would see it in a school textbook

let res = " x\t 1\t 2\t 3\t 4\t 5\t 6\t 7\t 8\t 9\t10"
for (let i = 1; i <= 10; i++) {
    res += `\n${i < 10 ? ' ' + i : i}`
    for (let j = 1; j <= 10; j++) {
        res += `\t${i * j >= 10 ? i*j : ' ' + i*j}`
    }
}
console.log(res)

So we only need to consider the spaces, tabs and newlines the rest is straight forward

Output

 x     1     2     3     4     5     6     7     8     9    10
 1     1     2     3     4     5     6     7     8     9    10
 2     2     4     6     8    10    12    14    16    18    20
 3     3     6     9    12    15    18    21    24    27    30
 4     4     8    12    16    20    24    28    32    36    40
 5     5    10    15    20    25    30    35    40    45    50
 6     6    12    18    24    30    36    42    48    54    60
 7     7    14    21    28    35    42    49    56    63    70
 8     8    16    24    32    40    48    56    64    72    80
 9     9    18    27    36    45    54    63    72    81    90
10    10    20    30    40    50    60    70    80    90    100

    var table = 5;
    var count = 12;
    
    for (var i = 0; i < count; i++) {
        i++;
        console.log(table, "X", i, "=", table * i);
        --i;
    }

document.write("<center><table border='5px'>");
    for (var i = 1; i <= 10; i++) {
        for (var j = 1; j <= 10; j++) {
            document.write("<td><center>" + i * j);
    }
document.write("</tr>");
}