Question

求js高手做个的输入框的目录树

求js高手做个的输入框的目录树

不是太好表述：

类似于js的目录树，但是各个节点数量是未知数（需要即时设置），
各个节点个都是输入框

-----------------------------------------------

举个例子：
一个学校有多少个年级，每个年级有多少个班，每个班有少人。
也就是说，根据上一级的数量确定下一级input数量

如下：其中大写的name 是指输入数量，小写的name是指名字（年级名，班名，人名）输入框

第一层（年级）
在 <input name="A">输入2 则即时显示

<input name="a1"><input name="B1">
<input name="a2"><input name="B2">

第二层（班） 每个年级多少班
在 <input name="B1">输入2 则即时显示

<input name="b11"><input name="C11">
<input name="b12"><input name="C12">

在 <input name="B2">输入2 则即时显示

<input name="b21"><input name="C21">
<input name="b22"><input name="C22">

第三层（人） 每个班多少人
在 <input name="C11">输入2 则即时显示

<input name="d11-1">
<input name="d11-2">

在 <input name="C22">输入2 则即时显示

<input name="d22-1">
<input name="d22-2">

-----------------------------------------------
看图示如下：
每当在黄色输入框输入数字，则会产生对应数量的输入框。

请高手赐教！！
很早就找人做个这个，可是最终没有一个能做出来的。
我这里倒是有个一个不成形的 例子，只是实现了第二层的初步打开，可是往下就不会了。
希望有高手给个实例！

Answer 1

我随便的编写了一个思路，其它的你去搞定！
<span style="display:inline-block;background:#FF0000">共<input name="A" type="text" style="width:40px;" onkeyup="createInput(this)"/>年级</span>
<script>
function getPosition(obj){
var left=0;if(obj){while (obj.offsetParent){left += obj.offsetLeft;obj = obj.offsetParent;}}return left;
}
function createInput(obj){
var ml=getPosition(obj.parentNode)
var div=document.createElement("div");
div.style.marginLeft=ml+obj.parentNode.clientWidth;
div.style.tableLayout="fixed";
div.style.whiteSpace="nowrap";
var str="";
for(var i=1;i<=obj.value;i++){
str+="<span><input type='text' style='width:80px'><input type='text' style='width:40px' onkeyup='createInput(this)'></span><br>"
}
div.innerHTML=str;
obj.parentNode.insertAdjacentElement("afterEnd",div);
}
</script>
相信你懂得！

追问

高手!，已实现了我的想法，且代码超简洁。
能再帮个忙吗？我想实现，在第三层的时候，
不让出现了。
另外后边挂上不同的单位如，第一层单位是“年级”，第二层单位是“班”，第三层单位则是“人名”，
以上想法对您很简单，而对我这不懂的简直太难了。我会追加分数，以示感谢！

Answer 2

这个貌似挺简单的吧，最初有一个input，onblur事件获取value，然后一个循环创建input，在创建的input绑定onblur事件，用来创建下级input...

追问

确实如 lilo1001 所说，就是这回事。 可是兄弟js 实在不怎么懂，希望给个实例！