HTMLTABLE MOOTOOLS

just experiment

by Meily Chhon

HTML

<div id="wrapper">
		<h1>Pop Ups</h1>
		<ul>
			<li>Good Bros</li>
			<li>Kinds</li>
			<li>Helpful</li>
			<li>Good Knowledge</li>
		</ul>
		<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">
			</div>
			<div id="pagination">
				append pagination link
			</div>
		</div>
</div>

JavaScript

window.addEvent('domready', function(){
	//create new element
	//create table as a global variable
	var table;
	var link = 'http://www.avacas.asia';
	var linkText = 'Atlanta';
	var address = 'cd and R Winne St';
	//create an html <table>
	var table = new HtmlTable ({
		properties: {
		border: 1,
		cellspacing: 2
		},			
		headers: ['Name','Address']
	});	
	//this is a function to add rows to table;
	function addRow() {	
		//loop to create 10 table rows
		for (var i=0; i<10; i++) {
			//create a new <a> tag
			var aTag = new Element ('a', {
				href: link,
				title: 'Name of City',
				html: linkText
			});
			//add row to table
			table.push([aTag, address]);
		}
		
		//inject table to div pop-up-content
		table.inject($('pop-up-content'));
	}
	
	var li = $$('li');
	li.addEvent('click', function(){
		addRow();		
	});
});