Untitled

<!DOCTYPE html>
<head>
	<title>Втора задача</title>
	<meta charset="UTF-8">
	<script>
	function loadXML(){
		var xmlhttp;
		var txt,x,xx,i;
		xmlhttp=new XMLHttpRequest();
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4)
			{
				var option = "<option value='Title'>Title</option><option value='Artist'>Artist</option><option value='Country'>Country</option><option value='Company'>Company</option><option value='Price'>Price</option><option value='Year'>Year</option>";
				document.getElementById("menu").innerHTML=option;
				txt="<table border='1'><tr><th class='Title'>TITLE</th><th class='Artist'>ARTIST</th><th class='Country'>COUNTRY</th><th class='Company'>COMPANY</th><th class='Price'>PRICE</th><th class='Year'>YEAR</th></tr>";
				x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
				for (i=0;i<x.length;i++)
				{
					txt=txt + "<tr>";
					xx=x[i].getElementsByTagName("TITLE");
					{
						try
						{
							txt=txt + "<td class='Title'>" + xx[0].firstChild.nodeValue + "</td>";
						}
						catch (er)
						{
							txt=txt + "<td> </td>";
						}
					}
					xx=x[i].getElementsByTagName("ARTIST");
					{
						try
						{
							txt=txt + "<td class='Artist'>" + xx[0].firstChild.nodeValue + "</td>";
						}
						catch (er)
						{
							txt=txt + "<td> </td>";
						}
					}
					xx=x[i].getElementsByTagName("COUNTRY");
					{
						try
						{
							txt=txt + "<td class='Country'>" + xx[0].firstChild.nodeValue + "</td>";
						}
						catch (er)
						{
							txt=txt + "<td> </td>";
						}
					}
					xx=x[i].getElementsByTagName("COMPANY");
					{
						try
						{
							txt=txt + "<td class='Company'>" + xx[0].firstChild.nodeValue + "</td>";
						}
						catch (er)
						{
							txt=txt + "<td> </td>";
						}
					}
					xx=x[i].getElementsByTagName("PRICE");
					{
						try
						{
							txt=txt + "<td class='Price'>" + xx[0].firstChild.nodeValue + "</td>";
						}
						catch (er)
						{
							txt=txt + "<td> </td>";
						}
					}
					xx=x[i].getElementsByTagName("YEAR");
					{
						try
						{
							txt=txt + "<td class='Year'>" + xx[0].firstChild.nodeValue + "</td>";
						}
						catch (er)
						{
							txt=txt + "<td> </td>";
						}
					}
					txt=txt + "</tr>";
				}
				txt=txt + "</table>";
				document.getElementById('container').innerHTML=txt;
			}
		}
		xmlhttp.open("GET","cd_catalog.xml",true);
		xmlhttp.send();
	}
	function HideData(){
		if(!document.getElementById("checkfield").checked){
			var selected = document.getElementById("menu");
			var val = selected.options[selected.selectedIndex].value;
			var niza = document.getElementsByClassName(val);
			for(var i=0; i<niza.length; i++){
				niza[i].style.display="none";
			}
		}
		else{
			var selected = document.getElementById("menu");
			var val = selected.options[selected.selectedIndex].value;
			var niza = document.getElementsByClassName(val);
			for(var i=0; i<niza.length; i++){
				niza[i].style.display="";
			}

		}
	}
	</script>
	<style>
	table th
	{
		text-align: center;
		font-size: 25px;
	}
	</style>

</head>
<body>

	<button id="get" onclick="loadXML()"> Get data</button><br/>
	<select id="menu" onchange="HideData()">

	</select >
	<input type="checkbox" id="checkfield" onchange="HideData()" checked />
	<div id="container">
	</div>

</body>
</html>