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 comboboxOptions = '';
for( var i=1; i<=20;i++) comboboxOptions += '\n<option value="'+i+'">'+i+'</option>';

$('#Rows').append(comboboxOptions);
$('#Cols').append(comboboxOptions);

$('#Submit').click(function(){
    var 
        row_cnt = eval($('#Rows').val()),
        col_cnt = eval($('#Cols').val());
    
    var
        tds = '<td>Data\n'.repeat(col_cnt),
        trs = ('<tr>\n'+tds).repeat(row_cnt),
        table = '<table id="CreatedTbl">\n' + trs + '</table>';
    
    $('#tablePreviewArea').html(table);
    
});

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