JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<style>
	table{
		width:500px;
		height:500px;
	}
	table td{
		padding:10px;
		margin:10px;
		border:1px solid #ccc;
	}
</style>
<script>
	function createTable(){
	mytable = $('<table></table>').attr({ id: "basicTable",class:"table table-hover"});
    var rows = new Number($("#rowcount").val());
    var cols = new Number($("#columncount").val());
    var tr = [];

    for (var i = 0; i <= rows; i++) {
        var row = $('<tr></tr>').attr({ class: ["class1"].join(' ') }).appendTo(mytable);
    if (i==0) {
      for (var j = 0; j < cols; j++) {
           var p= $('<th></th>').attr({class:["info"]}).appendTo(row);
		
		var data = {     'Country': 'India',     'Country1': 'USA', 'Country2': 'Australia',    
 'Country3': 'Srilanka'}  ;
		var s = $('<select />');
			for(var val in data) 
	{    
		$('<option />', {value: val, text: data[val]}).appendTo(s); 
	} 
		s.appendTo(p);
		
		
	
        }
    }else {
        for (var j = 0; j < cols; j++) {
            $('<td></td>').text("text1").appendTo(row);
        }
}
    }

    mytable.appendTo("#box");
}</script>



Row Count:<input type="text" id="rowcount" />
Column Count:<input type="text" id="columncount" />
<input type="button" onclick="createTable();" value="Create Table" />
<div id="box">
</div>