JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://testing.lolnode.com/lol/assets/runes/rune0.png"></script>
<table class="runes">
</table>

CSS

table.runes {border-collapse: collapse;}
	table.runes tr:nth-child(odd) {
		background: -webkit-linear-gradient(#F7F7F7, #FFF); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#F7F7F7, #FFF); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#F7F7F7, #FFF); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#F7F7F7, #FFF); /* Standard syntax */
		border:1px solid rgba(204,204,204,0.5);
		border-bottom:none;
	}
	table.runes tr:nth-child(even) {
		background:#FFF;
		border:1px solid rgba(204,204,204,0.5);
		border-top:none;
	}
	table.runes tr td:nth-child(2) {padding-left:5px;}
	table.runes tr td.index {display:none;}
	table.runes tr td.icon {cursor:pointer;}
	table.runes tr td.entry-name {
		font-weight:bold;
		cursor:pointer;
	}
	table.runes tr td.entry-desc {
		padding-bottom:5px;
		font-style:italic;
		cursor:default;
	}
	table.runes tr td.entry-name,
	table.runes tr td.entry-desc {
		padding-left:5px;
	}

JavaScript

$(document).ready(function() {
	$.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function(response){
		console.log(response.data);
		$.each(response.data, function (index, entry) {
			$('table.runes').append('<tr><td class="index">'
					+index+ '</td><td class="icon"> \
<div style="width:48px;height:48px;background:url(http://testing.lolnode.com/lol/assets/runes/rune0.png) -' +entry.image.x+ 'px -' +entry.image.y+ 'px no-repeat"> \
					</div></td><td class="entry-name">'
					+entry.name+ '</td></tr> \
					<tr><td></td><td class="entry-desc">'
					+entry.description+ '</td></tr>'
				);
		});
	});
	jQuery("body").on("click", "td.entry-name", function() {
		var getText = $(this).siblings('td.index');
		alert(getText.text());
    });
});