Taking User Input for building a Hierarchical Tree

Question

0.00/5 (No votes)

See more:

Hi,

The below code gives a Treeview of Items and their sub-items,.. It shows in the hierarchical format,... but instead of hard-coding the input Item 1 , Sub-item 1 etc,..., i wanna give an input so that it will become a generic code and show the hierarchical tree view for any input we give,..
I tried giving some variables but it didn't work for me..
1)Could you please suggest me on this.. and also do u have any other ideas to build a hierarchical tree using HTML/JAVASCRIPT..
2)I also tried using DOM but it didn't work,.. I didn't know how to use DOM properly, suggest me if you have any idea about DOM

<code>
<ul>
<li>
<a href="#" onclick="toggle('node1')">Item 1</a>
<ul id="node1" style="display:none">
<li>Sub-item 1</li>
<li>
<a href="#" onclick="toggle('node2')">Sub-item 2</a>
<ul id="node2" style="display:none">
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle('node3')">Item 2</a>
<ul id="node3" style="display:none">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>

</code>

Thanks in advance!

Posted 23-Jun-10 16:04pm

Swathi@MST

Updated 23-Jun-10 16:41pm

v2

Add a Solution

4 solutions

Solution 2

Thanks a lot for your reply! I have checked the above link to add controls dynamically,.
There was some problem in the code,. Its showing "Add some elements" as the o/p,. but not showing the childs added to it,..
The fuction addElement has not been triggered..

<pre>
<html>
<body>
<script type="text/javascript">
function addElement()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick = \'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>' ni.appendChild(newdiv);
}
</script>

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

</body>
</html>
</pre>

Please identify the error in the code.
Thanks in advance!

Posted 23-Jun-10 19:42pm

Swathi@MST

Updated 23-Jun-10 19:43pm

v2

Comments

PSK_ 24-Jun-10 1:59am

";" was missing in the function.

Try this

<html>
<body>
<script type="text/javascript">
function addElement()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number ' + num +' has been added! <a href='#' onclick = 'removeElement('+divIdName

+')'>Remove the div "'+divIdName+'"</a>' ;
ni.appendChild(newdiv);
}
</script>

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

</body>
</html>

Swathi@MST 24-Jun-10 2:10am

Thanks for your reply,. I tried the above code which you have provided ,. but still i could see the same problem, no childs added,.. It shows only "Add Some Elements" as the o/p,. when i click it, its not showing any childs below..
Please suggest me on this

Solution 3

Thanks for your reply,. I tried the above code which you have provided,. but still i could see the same problem, no childs added,.. It shows only "Add Some Elements" as the o/p,. when i click it, its not showing any childs below..
Please suggest me on this

Posted 23-Jun-10 20:14pm

Swathi@MST

Updated 23-Jun-10 20:15pm

v2

Comments

PSK_ 24-Jun-10 2:45am

Find this in the code you have posted

newdiv.innerHTML = 'Element Number '+num+' has been added! <a href='#' onclick = 'removeElement('+divIdName+')'>Remove the div "'+divIdName+'"</a>'

there is a semicolon missing add it.

Solution 5

Hi Prakash,

I have added the semicolon after that line, but still facing the same problem. Did u try executing the program.. What was the O/p..?
You have suggested to try this code, i tried the same,.. i inspected every line, seems to be correct,.

<code>
<html>
<body>
<script type="text/javascript">
function addElement()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number ' + num +' has been added! <a href='#' onclick = 'removeElement('+divIdName+')'>Remove the div "'+divIdName+'"</a>' ;
ni.appendChild(newdiv);
}
</script>

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

</body>
</html>
</code>

I have pasted the same code,.
Thanks in advance.

Awaiting your reply,
Swathi

Posted 24-Jun-10 4:38am

Swathi@MST

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**PSK_** · Accepted Answer · 2010-06-23T17:43:00

Solution 1

You need to create elements dynamically and add them at particular control.

Like find the <ul> using its id and create a <li> and add it to the <ul>

You can check following article to know how to add controls dynamically using javascript.

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Posted 23-Jun-10 17:43pm

PSK_

Comments

Swathi@MST 24-Jun-10 1:39am

Thanks a lot for your reply! I have checked the above link to add controls dynamically,.
There was some problem in the code,. Its showing "Add some elements" as the o/p,. but not showing the childs added to it,..
The fuction addElement has not been triggered..

function addElement()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number '+num+' has been added! Remove the div "'+divIdName+'"' ni.appendChild(newdiv);
}

Add Some Elements

Please identify the error in the code.
Thanks in advance!