JSFiddle - React, Tailwind, and code Playground

by Meily Chhon

HTML

<div id="wrapper">
	<div class="over-lay"></div>
	<div id="pop-up">
		<div class="menu-tab">
			<ul>
				<li><a href="#" title="#">Act</a></li>
				<li><a href="#" title="#">NSW</a></li>
				<li><a href="#" title="#">QLD</a></li>
				<li><a href="#" title="#">SA</a></li>
				<li><a href="#" title="#">TAS</a></li>
				<li><a href="#" title="#">VIC</a></li>
				<li><a href="#" title="#">WA</a></li>
			</ul>
		</div>
		<div id="pop-up-content">
			<table class="table-custom" cellspacing="2" border="1">
				<thead>
					<tr>
						<th>Name</th>
						<th>Address	<a href="#" class="btn-close">Close</a></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><a href="#" title="Cremone">Cremone</a></td>
						<td>CNR Military Rd & Winne St</td>
					</tr>
					<tr>
						<td><a href="#" title="Cremone">Penrith</a></td>
						<td>Queensland</td>
					</tr>
					<tr>
						<td><a href="#" title="Cremone">St Peters</a></td>
						<td>CNR Princess Hwy and Bishop St</td>
					</tr>
					<tr>
						<td><a href="#" title="Cremone">Warie Woods</a></td>
						<td>CNR Warie Woods Hwy and Bishop St</td>
					</tr>
					<tr>
						<td><a href="#" title="Cremone">North Ride</a></td>
						<td>729 Lane Cove RD</td>
					</tr>
					<tr>
						<td><a href="#" title="Cremone">Glades Ville</a></td>
						<td>385 Victoria RD</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div id="pagination">
			<div class="inner-pagination">
				<ul>
					<li><a href="#" title="nav-right"></a></li>
					<li><a href="#" title="page1">1</a></li>
					<li><a href="#" title="page2">2</a></li>
					<li><a href="#" title="page3">3</a></li>
					<li><a href="#" title="page1">4</a></li>
					<li><a href="#" title="page1">5</a></li>
					<li><a href="#" title="page1">6</a></li>
					<li><a href="#" title="page1">7</a></li>
					<li><a href="#" title="page1">8</a></li>
					<li><a href="#" title="page1">9</a></li>
					<li><a href="#" title="page1">10</a></li>
					<li><a href="#"...

JavaScript

window.addEvent('domready', function(){
	//create new element
	var foo = [
		{
			"name":"Cremone",
			"address":"CNR Military Rd & Winne St",
			"href":"http://avacas.asia/#index.html"
		},
		{
			"name":"Penrith",
			"address":"Queensland",
			"href":"http://avacas.asia/#recruitment.html"
		},
		{
			"name":"St Peters",
			"address":"CNR Princess Hwy and Bishop St",
			"href":"http://avacas.asia/#aboutus.html"
		},

		{
			"name":"Warie Woods",
			"address":"CNR Warie Woods Hwy and Bishop St",
			"href":"http://avacas.asia/#portfolio.html"
		},
		{
			"name":"North Ride",
			"address":"729 Lane Cove RD",
			"href":"http://avacas.asia/#contactus.html"
		},
		{
			"name":"Glades Ville",
			"address":"385 Victoria RD",
			"href":"http://avacas.asia/#services.html"
		}
	];
	
	function addRow() {	
		//loop to create 10 table rows
		
	//create table as a global variable
	var table;
	//create an html <table>
	var table = new HtmlTable ({
		properties: {
		border: 1,
		cellspacing: 2
		},			
		headers: ['Name','Address']
	});	
        for(var i=0; i<foo.length; i++){			
			var linkTmp = foo[i].name;
			var linkTextTmp = foo[i].href;
			var addressTmp = foo[i].address;
			//console.log(linkTextTmp);
			var aTag = new Element ('a', {
				href: linkTextTmp,
				title: linkTmp,
				html: linkTmp
			});
			//add row to table
			table.push([aTag, addressTmp]);
		}
		//inject table to div pop-up-content
		table.inject($('pop-up-content'));	
	}
	//this is a function to add rows to table;
	var li = $$('li');
	li.addEvent('click', function(){
		addRow();		
	});
});