How to change the loop to reverse the square print in Javascript-CodePudding

I'm learning java script and I'm currently working with testing in javiscritp, I've done this code that you can look at, but I don't know how to reverse now the order of these cubes to be 2 up and 1 down (see what I want in the picture) I know I need to change something for loops but I fail in any way to get what I want.

Photo what I want now

let Tabela = (function () {
   const dajRed = function (tabela) {
       let red = document.createElement("tr");
       tabela.appendChild(red);
       return red;
   }
   const dajCeliju = function (red, prikazi) {
       let celija = document.createElement("td");
       if (!prikazi) celija.style = "display:none;";
       red.appendChild(celija)
       return celija;
   }
   const crtaj = function (x, y) {
       const body = document.getElementsByTagName("body")[0];
       let tabelaEl = document.createElement("table");
       body.appendChild(tabelaEl);
       for (let i = 0; i < y; i  ) {
           let red = dajRed(tabelaEl);
           for (let j = 0; j < x; j  ) {
               dajCeliju(red, j < i);
           }
       }
   }
   return {
       crtaj: crtaj
   }
}());
//table.crtaj(3,3)
//i=0 ⍉⍉⍉
//i=1 ⎕⍉⍉
//i=2 ⎕⎕⍉ 
//Tabela.crtaj(8, 8);
let assert = chai.assert;
describe('Tabela', function() {
 describe('crtaj()', function() {
   it('should draw 3 rows when parameter are 2,3', function() {
     Tabela.crtaj(2,3);
     let tabele = document.getElementsByTagName("table");
     let tabela = tabele[tabele.length-1]
     let redovi = tabela.getElementsByTagName("tr");
     assert.equal(redovi.length, 3,"Broj redova treba biti 3");
   });
   it('should draw 2 columns in row 2 when parameter are 2,3', function() {
       Tabela.crtaj(2,3);
       let tabele = document.getElementsByTagName("table");
       let tabela = tabele[tabele.length-1]
       let redovi = tabela.getElementsByTagName("tr");
       let kolone = redovi[2].getElementsByTagName("td");
       let brojPrikazanih = 0;
       for(let i=0;i<kolone.length;i  ){
           let stil = window.getComputedStyle(kolone[i])
           if(stil.display!=='none') brojPrikazanih  ;
       }
       assert.equal(brojPrikazanih, 2,"Broj kolona treba biti 2");
     });
 });
});

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Mocha Tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
   <style>
   td{
     border: 1px solid black;
     height: 20px;
     width: 20px;
   }
   </style>
 </head>
 <body>
   <div id="ispis"></div>
   <div id="mocha"></div>
 
   <script src="https://unpkg.com/chai/chai.js"></script>
   <script src="https://unpkg.com/mocha/mocha.js"></script>
 
   <script >
     mocha.setup('bdd');
     mocha.checkLeaks();
   </script>
   <script src="tabela.js"></script>
   <script src="test.js"></script>
   <script >
     mocha.run();
   </script>
 </body>
</html>

CodePudding user response：

Invert the check in dajCeliju:

if (prikazi) celija.style = "display:none;";

OR second option - change the params:

dajCeliju(red, j >= i);

Is this what you need?