Forming a TreeStructure Using JavaScript

Chvrsri
Posted by Chvrsri under JavaScript category on | Points: 40 | Views : 2164
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 !!!

Comments or Responses

Login to post response