Posted By

hamittou on 08/11/14

Tagged

table

Versions (?)

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

Statistics

Viewed 9957 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

Highlighted TextExpand

<html>
<head>
<title>Japanese Adjective Studies</title>

<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>Japanese</td><td>English</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>Japanese</td><td>English</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">Hover over to show meaning.</td></tr>');
				revVal = false;
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td>English</td><td>Japanese</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">Hover over to show meaning.</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>Japanese</td><td>English</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\'">'+ Eng[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2">Hover over to show meaning.</td></tr>');
				revVal = false;
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td>English</td><td>Japanese</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\'">'+ Jpn[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2">Hover over to show meaning.</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\'">'+ Eng[x] +'</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>English</td><td>Japanese</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\'">'+ Jpn[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2">Hover over to show meaning.</td></tr>');
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td>Japanese</td><td>English</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\'">'+ Eng[x] +'</td></tr>');
				}
				$('#adjtable').append('<tr><td colspan="2">Hover over to show meaning.</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>English</td><td>Japanese</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">Hover over to show meaning.</td></tr>');
			}else{
				$('#adjtable').append('<tr><th colspan="2" style="background-color:#009999; color:#fff;">Japanese Adjective Studies</th></tr><tr><td>Japanese</td><td>English</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">Hover over to show meaning.</td></tr>');
			}
			allShown = true;
			document.getElementById("showbutt").innerHTML="Hide All";
		}
	}
</script>
<tr><td colspan="2">Hover over to show meaning.</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.