JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<input id="tableNumber" type="number"><input id="colNumber" type="number">
<button id="submit-table-number-btn">Change Table</button>
<table>
    <tr>
        <td class="border">1</td>
        <td class="border">2</td>
        <td class="border">3</td>
        <td class="border">4</td>
        <td class="border">5</td>
        <td class="border">6</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
<td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
       <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
       <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

tr {
    display: none;
}
td {
    display: none;
    border:1px dotted #ccc; padding:3px;
    width:42px; height:30px;
}
.show-row {
    display: table-row;
}
.show-row-cell {
    display: table-cell;
}
.border{border:1px solid red;}

JavaScript

var input = $('#tableNumber');
var input = $('#colNumber');
var button = $('#submit-table-number-btn');
var table = $('table');

function showTable(tableNumber,colNumber) {

    // get rows
    var rows = table.find('tr');

    // hide all rows, so we can show only those that we want
    rows.removeClass('show-row');

    // show only the ones we want, and store them
    var activeRows = rows.slice(0, tableNumber)
        .addClass('show-row');
    
    console.log(activeRows[0]);

    // get all cols
    var cols = rows.find('td');

    // hide all cols, so we can show only those that we want
    cols.removeClass('show-row-cell');
    
    var activeCols = rows.slice(0, colNumber)
        .addClass('show-row');
    
    console.log(activeCols[0]);

    
    // loop over shown rows, so we can show the cols we want
    for (var i = 0; i < activeRows.length; i++) {
    	for(var j=0; j < activeCols.length; j++){
        
        $(activeRows[i]).find('td')
            .slice(0, tableNumber)
            .addClass('show-row-cell');
    }
}

button.click(function () {

    var inputValue = input.val();
    var inputValue1 = input.val();
    showTable(inputValue,inputValue1);
});