JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

HTML

<form id="create_table" action="javascript:createTable()">
		<input type="text" id="column" > x <input type="text" id="row"> <input type="submit" value="Criar Matriz">
	</form>

	<div id="divTable">

	</div>

CSS

.tg .line{border: none;overflow:hidden;word-break:normal;}
	
	.tg{
		border-left: 3px #333333 solid ; 
		border-right: 3px #333333 solid ; 
		margin: 3px; 
		border-collapse:collapse;
		display: inline-block;
	}.tg tbody{
		padding-left: 533px;
		padding-right: 5px;
	}
	.cells{
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 20px;
		border: none;
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
		min-width: 30px;
        
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	.cells:hover{
		border: 1px solid #cccccc;
	}

JavaScript

function ps(n){
    return parseFloat(n);
}

var MTZ = document.getElementsByClassName("tg");

function createTable() {

    rows = document.getElementById("row");
    columns = document.getElementById("column");


    var N = 0;
    var Column = []; 
    var Row = []; 

    var table = document.createElement('table');
    table.setAttribute('class', 'tg');

    for (var g = 0; g < columns.value; g++){

        Row.push(table.insertRow(g));
        Row[g].setAttribute('class', 'spine');

        for (var q = 0; q < rows.value; q++){

            Column[q] = Row[g].insertCell(q);
            Column[q].setAttribute('class', 'line');
            var input = document.createElement("input");
            input.type = "text";
            input.value = 1;
            input.setAttribute('class', 'cells'); 
            Column[q].appendChild(input);
            input.style.width = (input.value.length * 12) + "px";
            N++;
        };
    };
    var div = document.getElementById('divTable');
    div.appendChild(table);
}

function setMatriz(number, type){

    var Mz = MTZ[number]; 

    var Rows = parseFloat( order( Mz )[0] );
    var Columns = parseFloat( order( Mz )[1] );

    var n = 0;
    var cell = new Array(); 
    var lines = [];

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

        cell[j] = [];

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

            lines.push(document.getElementsByClassName('cells')[n]);
            cell[j] = lines;
            n++;
        };
        lines = [];
    }
}