JSFiddle - React, Tailwind, and code Playground

by Phil Adib

HTML

<p><b>Table Preview</b></p>
<div id='tablePreviewArea' style='border: 1px solid grey; min-height: 100px; padding: 10px'>
    <p><i>Pending column and row values</i></p>
</div>

<p><b>Inputs</b></p>
Rows: <select id='Rows'></select>
Cols: <select id='Cols'></select>
<button id='Submit'>Submit</button>

CSS

#CreatedTbl td {
    border: 1px solid black;
    min-width: 40px;
    padding: 10px 0px;
    text-align: center;
}

JavaScript

var
    rows = document.getElementById('Rows'),
    cols = document.getElementById('Cols');

var comboboxOptions = '';

for( var i=1; i<=20;i++) {
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    var opt_clone = opt.cloneNode(true)
    
    rows.appendChild(opt);
    cols.appendChild(opt_clone);
}

document.getElementById('Submit').onclick = function(){
	var 
		row_cnt = eval(rows.value),
    	col_cnt = eval(cols.value);

    var
        tds = '<td>Data\n'.repeat(col_cnt),
        trs = ('<tr>\n'+tds).repeat(row_cnt),
        table = '<table id="CreatedTbl">\n' + trs + '</table>';
    
    document.getElementById('tablePreviewArea').innerHTML = table;
						
};

String.prototype.repeat = function( num )
{
    return new Array( num + 1 ).join( this );
}