JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

<button onclick="createTable()">Create Table</button>
		<div class="tablecontainer">
			
		</div>

CSS

table, th, td {
			border: 1px solid #ddd;
			border-collapse: collapse;
			padding: 10px;
		}

JavaScript

function createTable(){
			var content = "";

			 $.getJSON("https://api.randomuser.me/?results=25", function(data) {
				content += '<table><tr><th>Select</th><th>Name</th><th>DOB</th></tr>'

				for(var i=0;i < data.results.length ; i++ ){
					var dataFromJSON = encodeURIComponent(JSON.stringify(data.results[i]));
					content += '<tr><td><input type="checkbox" name="selectRow" value="'+dataFromJSON+'"></td><td><a href="'+data.results[i].picture.thumbnail+'" class="imgurl" target="_blank">'+ data.results[i].name.first + '</a></td><td>'+ data.results[i].dob +'</td></tr>';
				}
				content += '</table>'
				$('.tablecontainer').html(content);


			}).fail(function(error) {
				console.log("**********AJAX ERROR: " + error);
			});
					
		}