JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

<button onclick="createTable()">Load Table</button>
		  <button onclick="saveData()">Save Table data</button>
				<table id="datatable" align="center">
					<tr><th>Select</th><th>Name</th><th>DOB</th></tr>
				</table>
			
			<br />
			<button onclick="createJson()">Save displayed data & create JSON</button>
			<br />
			<div class="container">
				
			</div>

CSS

table, th, td {
				border: 1px solid #ddd;
				border-collapse: collapse;
				padding: 10px;
			}
			
			table {
				margin: auto;
			}
			
			.parent {
				height: 25%;
				width: 90%;
				padding: 1%;
				margin-left: 1%;
				margin-top: 1%;
				border: 1px solid black;
			}

			.parent:nth-child(odd){
				background: skyblue;
			}

			.parent:nth-child(even){
				background: green;
			}

JavaScript

function createTable() {
					$.getJSON("https://api.randomuser.me/?results=5", function(data) {
						// First, clear the table
						$('#datatable tr:has(td)').remove();
						data.results.forEach(function (record) {
							var json = JSON.stringify(record);
							$('#datatable').append(
								$('<tr>').append(
									$('<td>').append(
										$('<input>').attr('type', 'checkbox')
													.addClass('selectRow')
													.val(json)
									),
									$('<td>').append(
										$('<a>').attr('href', record.picture.thumbnail)
												.addClass('imgurl')
												.attr('target', '_blank')
												.text(record.name.first)
									),
									$('<td>').append(record.dob)
								)
							);
						})
					}).fail(function(error) {
						console.log("**********AJAX ERROR: " + error);
					});            
				}

				function saveData(){
					// Scrape the URLs that were already collected into a Set:
					var used = new Set($('.myLink').map(function () {
						return $(this).attr('href');
					}).get());
					var errors = [];
					$('input.selectRow:checked').each(function(count) {
						// Get the JSON that is stored as value for the checkbox
						var obj = JSON.parse($(this).val());
						// See if this URL was already collected (that's easy with Set)
						if (used.has(obj.weburl)) {
							errors.push(obj.title);
						} else {
							// Append it to the collection (use jQuery for appending)
							$('.container').append(
								$('<div>').addClass('parent').append(
									$('<label>').addClass('dataLabel').text('Name: '),
									obj.name.first + ' ' + obj.name.last,
									$('<br>'), // line-break between name & pic
									$('<img>').attr('src', obj.picture.thumbnail), $('<br>'),
									$('<label>').addClass('dataLabel').text('Date of birth: '),
									obj.dob, $('<br>'),
									$('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
									obj.location.street, $('<br>'),
									obj.location.city + ' ' +...