接受用户输入以构建分层树 [英] Taking User Input for building a Hierarchical Tree
问题描述
下面的代码给出了项目及其子项目的树状视图，..以分层格式显示，...但是我不想给输入的项目1，子项目1等进行硬编码，...我想给输入，这样它将变成通用代码，并为我们提供的任何输入显示层次树视图..
我尝试提供一些变量，但对我来说不起作用.
1)请问您对此有何建议.您还有其他想法使用HTML/JAVASCRIPT构建层次树吗?
2)我也尝试过使用DOM，但是它没有用，..我不知道如何正确使用DOM，如果您对DOM有任何了解，请提出建议
< code>
< ul>
< li>
< a href =#" onclick ="toggle(" node1)">项目1</a>
< ul id ="node1" style ="display:none">
< li>子项目1</li>
< li>
< a href =#" onclick ="toggle(" node2)">子项目2</a>
< ul id ="node2" style ="display:none">
< li>子子项目1</li>
< li>子子项目2</li>
</ul>
</li>
< li>子项目3</li>
</ul>
</li>
< li>
< a href =#" onclick ="toggle(" node3)">项目2</a>
< ul id ="node3" style ="display:none">
< li>子项目1</li>
< li>子项目2</li>
</ul>
</li>
< li>项目3</li>
</ul>
</code>
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!
推荐答案
您需要动态创建元素并将其添加到特定控件中.
就像使用其ID查找<ul>并创建<li>并将其添加到<ul>
您可以查看以下文章，了解如何使用javascript动态添加控件.
http://www.dustindiaz.com/add-and-remove-html -elements-dynamically-with-javascript/
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/
非常感谢您的回复！我已经检查了上面的链接以动态添加控件.
代码中存在一些问题.其将添加一些元素"显示为o/p.但未显示添加到其中的子项，..
功能addElement尚未触发..
< pre>
< html>
< body>
< script type ="text/javascript">
函数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 =``元素编号''+ num +''已添加！ < a href = \''#\''onclick = \''removeElement(''+ divIdName +'')\''>删除div''+ divIdName +''"</a>''ni .appendChild(newdiv);
}
</script>
<输入type ="hidden" value ="0" id ="theValue"/>
< p>< a href ="javascript :;" onclick ="addElement();">添加一些元素</a></p>
< div id ="myDiv"> </div>
</body>
</html>
</pre>
请在代码中找出错误.
预先感谢！
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!
感谢您的回复.我尝试了您提供的上述代码.但我仍然可以看到相同的问题，没有添加任何子项，..它仅将添加一些元素"显示为o/p.当我单击它时，它的下方没有显示任何子项. 请在这个
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
这篇关于接受用户输入以构建分层树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
