Posted By

hamittou on 08/11/14
Tagged

table
Versions (?)

Last Edited at 08/11/14 03:36am
Statistics

Viewed 10681 times
Favorited by 0 user(s)
Related snippets

Japanese Adjective Study Table

/ Published in: JavaScript
I was studying Japanese adjectives and ye olde paper and pen wasn't enough so I made this. Basic as the basic can be
Expand | Embed | Plain Text
Copy this code and paste it in your HTML
<html>
<head>
<title>Japanese Adjective Studies</title>
<!--
	by hamittou. japanese adjective studies table.
	10 august 2014 ce.
	//
	# INSTRUCTIONS
	# copy the code to your text editor and save it as .html
	# open the file with your favorite browser
	# ???
	# profit.
	//
	# update 10 august:
	#-"show/hide all" button added
	#-changed color of table header
	//
	if you have anything to say
	write it to hamit(dot)oezdemir(at)gmail(dot)com.
-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<style type="text/css">
.sps{visibility:hidden;}
body{position:absolute;left:45%;}
</style>
</head>
<body>
<table id="adjtable" border="1">
<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr>
<tr><td><i>Japanese</i></td><td><i>English</i></td></tr>
<script type="text/javascript">
	var Eng = new Array("new", "sweet", "painful", "delicious", "big",
		"interesting/funny", "tall/expensive", "small", "early/fast",
		"awful", "old", "nasty tasting", "difficult", "kind", "cheap",
		"young", "bad");
	var Jpn = new Array("atarashii", "amai", "itai", "oishii", "ookii",
		"omoshiroi", "takai", "chiisai", "hayai", "hidoi", "hurui",
		"mazui", "muzukashii", "yasashii", "yasui", "wakai", "warui");
	revVal = false;
	allShown = false;
	function rev(){
		document.getElementById("adjtable").innerHTML = "";
		if(allShown){
			if(revVal){
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td>'+ Eng[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
				revVal = false;
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td>'+ Jpn[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
				revVal = true;
			}
		}else{
			if(revVal){
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Eng[x] +'</span></td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
				revVal = false;
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Jpn[x] +'</span></td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
				revVal = true;
			}
		}
	}
	for(x=0;x<Eng.length;x++){
		$('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Eng[x] +'</span></td></tr>');
	}
	function showAll(){
		document.getElementById("adjtable").innerHTML = "";
		if(allShown){
			if(revVal){
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Jpn[x] +'</span></td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td onMouseOver="document.getElementById(\'sp_' + x + '\').style.visibility=\'visible\'" onMouseOut="getElementById(\'sp_' + x + '\').style.visibility=\'hidden\'"><span class="sps" id="sp_'+ x + '">'+ Eng[x] +'</span></td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
			}
			allShown = false;
			document.getElementById("showbutt").innerHTML="Show All";
		}else{
			if(revVal){
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>English</i></td><td><i>Japanese</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Eng[x] +'</td><td>'+ Jpn[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td><i>Japanese</i></td><td><i>English</i></td></tr>');
				for(x=0;x<Eng.length;x++){
					$('#adjtable').append('<tr><td>'+ Jpn[x] +'</td><td>'+ Eng[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>');
			}
			allShown = true;
			document.getElementById("showbutt").innerHTML="Hide All";
		}
	}
</script>
<tr><td colspan="2"><font size="2">Hover over to show meaning.</font></td></tr>
</table>
<center><button onClick="rev();">Reverse</button><button id="showbutt" onClick="showAll();">Show All</button></center>
</body>
</html>
Report this snippet Tweet
Comments

Subscribe to comments
Comment:
You need to login to post a comment.