Forming a TreeStructure Using JavaScript

Posted by Chvrsri under JavaScript category on 11/3/2010 | Points: 40 | Views : 3389

Post Code |

Search Codes |

Code Home

HI

This code explains how to create a Tree Structure using HTML and JAVASCRIPT.. This is how it will be useful

<html>
	<head>
		<title>TREE STRUCTURE</title>

	<script type="text/javascript">
	
	function osopen()
	{
		
		tree_val=document.getElementById("osopen1").innerHTML= "&nbsp-&nbsp";
		document.getElementById("ostree").innerHTML="<button id='osopen1' onclick='osclose()'>"+tree_val+"</button>"+"OPERATING SYSTEMS "+" <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WINDOWS VISTA<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OPERA<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MOZILA";
	}

	function osclose()
	{
	
	
		tree_val=document.getElementById("osopen1").innerHTML= "&nbsp+&nbsp";
		document.getElementById("ostree").innerHTML="<button id='osopen1' onclick='osopen()'>"+tree_val+"</button>"+" OPERATING SYSTEMS ";
	}



	function hwopen()
	{
		
		tree_val=document.getElementById("hwopen1").innerHTML= "&nbsp-&nbsp";
		document.getElementById("hwtree").innerHTML="<button id='hwopen1' onclick='hwclose()'>"+tree_val+"</button>"+"HARDWARE EQUIPMENTS"+" <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MONITOR<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MOUSE<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEYBOARD";
	}

	function hwclose()
	{
	
	
		tree_val=document.getElementById("hwopen1").innerHTML= "&nbsp+&nbsp";
		document.getElementById("hwtree").innerHTML="<button id='hwopen1' onclick='hwopen()'>"+tree_val+"</button>"+"HARDWARE EQUIPMENTS";
	}	



	function swopen()
	{
		
		tree_val=document.getElementById("swopen1").innerHTML= "&nbsp-&nbsp";
		document.getElementById("swtree").innerHTML="<button id='swopen1' onclick='swclose()'>"+tree_val+"</button>"+"SOFTWARES "+" <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MSOFFICE<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ANTIVIRUSES<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NERO";
	}

	function swclose()
	{
	
	
		tree_val=document.getElementById("swopen1").innerHTML= "&nbsp+&nbsp";
		document.getElementById("swtree").innerHTML="<button id='swopen1' onclick='swopen()'>"+tree_val+"</button>"+"SOFTWARES";
	}	

	function cmopen()
	{
		
		tree_val=document.getElementById("cmopen1").innerHTML= "&nbsp-&nbsp";
		document.getElementById("cmtree").innerHTML="<button id='cmopen1' onclick='cmclose()'>"+tree_val+"</button>"+"COMPONENTS "+" <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RAM<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PROCESSOR<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HARDDISK";
	}

	function cmclose()
	{
	
	
		tree_val=document.getElementById("cmopen1").innerHTML= "&nbsp+&nbsp";
		document.getElementById("cmtree").innerHTML="<button id='cmopen1' onclick='cmopen()'>"+tree_val+"</button>"+"COMPONENTS";
	}


	</script>
	</head>

	<body bgcolor="orange">
	<h2 align="center"> LIST OF COMPUTER RELATED INFO </h2>
	<table align="center" border=1>
	<tr>

	<td>
	<div>
	<p id="ostree"><button id="osopen1" onclick="osopen()">&nbsp+&nbsp</button>OPERATING SYSTEMS</p>
	</div>
	</td></tr>
	
	<tr>
	<td>
	<div>
	<p id="hwtree"><button id="hwopen1" onclick="hwopen()">&nbsp+&nbsp</button>HARDWARE EQUIPMENTS</p>
	</div>
	</td></tr>


	<tr>
	<td>
	<div>
	<p id="swtree"><button id="swopen1" onclick="swopen()">&nbsp+&nbsp</button>SOFTWARES</p>
	</div>
	</td></tr>

	<tr>
	<td>
	<div>
	<p id="cmtree"><button id="cmopen1" onclick="cmopen()">&nbsp+&nbsp</button>COMPONENTS</p>
	</div>
	</td>


	</tr>

	


	</body>
</html>

This is how we can create a TreeStructure .

Cheers !!! HappyCoding !!!

Alert Moderator

Bookmark It

Comments or Responses

Latest Code Snipptes