JSFiddle - React, Tailwind, and code Playground

by Roman Zhak

HTML

<div id="matrix"></div>

JavaScript

function Matrix( isSquare ) {
  this.matrix = [];
  this.i = 0;
  this.j = 0;
  this.isSquare = isSquare || false;
  this.toSource;
};

Matrix.prototype.rows = function() {
 var args = arguments, length = args.length, i;
    for( i = 0; i < length; i++, this.i = i ) {
      this.matrix.push(args[i])   
    }
  return this;
};

Matrix.prototype.column = function( vectorY ) {
 var m = this.matrix, length = m.length, i, temp;
   for( i = 0; i < length; i++, this.j = i ) {
     m[i].push(vectorY[i])
   }
 return this;
}

Matrix.prototype.$ = function( i , j ) {
 return this.matrix[i - 1][j - 1];   
};

Matrix.prototype.size = function() {
  return [ this.i, this.j ].join("x");  
};

Matrix.prototype.diff = function( matrix ) {
  if( matrix instanceof Matrix ) {
    if( this.size() !== matrix.size() ) return;
     var newMatrix = new Matrix;
      for( var i = 0, l = matrix.length; i < l; i++ ) {
        // code  
      }
   }
}

Matrix.prototype.toSource = function() {
  var el = this.toSource = document.createElement("table");
    this.matrix
    .forEach(function( element, index, array ){
      var tr = document.createElement("tr"), td;
        for( var i = 0, l = element.length; i < l; i++ ) {
          td = document.createElement("td");
          td.textContent = element[i];
          tr.appendChild( td );
        }
      el.appendChild( tr );   
    })
  return this;
}

Matrix.prototype.append = function( el, ctx ) {
  if( el === "body" ) document.body.appendChild(  this.toSource || "" );
    else (( ctx || document ).getElementById( el ))
     .appendChild( this.toSource || "" );
   return this; 
}

var matrix = new Matrix( true );

   matrix.rows([1,2], [4,5], [7,8]);
   matrix.column([3,6,9])

  // structure 
  // [ 
  //   [ 1, 2, 3 ],
  //   [ 4, 5, 6 ],
  //   [ 7, 8, 9 ]
 // ]
  
  // get element (i,j);

  //alert(matrix.size());
  console.log(matrix.toSource().append("body"))