请教一个很难的问题：生成新id

Question

标题不知道如何描述准确。。要求效果是这样的：在一个html中，有这样的代码：<div id="div01">
<input type="button" onclick="" value="新增"> <input type="button" value="删除">
</div><div id="div02">
<input type="button" onclick="" value="新增"> <input type="button" value="删除">
</div><div id="div03">
<input type="button" onclick="" value="新增"> <input type="button" value="删除">
</div>……<div id="div0N">
<input type="button" onclick="" value="新增"> <input type="button" value="删除">
</div>
当点击新增按钮后，会新增新的一行：div的ID发生变化产生新的id，如div02 ,div03……一直循环要求是新出来的div，要在当前的id后插入，而不是所有div的最后面如：选择在第一个div即id=div01的层里面的按钮，点击了新增，将会在当前div01的后面新插入一个div02，而不是在最后一个div0N的后面插入新的div
上面的这些我用了一些很复杂的代码能“勉强”实现，但是问题就是，当点击新增后，如何将已存在的ID变化呢？
也就是这样：<div id="div01">
<input type="button" onclick="" value="新增"> <input type="button" value="删除">    ------点击本div内的新增按钮
</div><div id="div02">---这里是上面点击后产生的新的div
<input type="button" onclick="" value="新增"> <input type="button" value="删除">
</div>
<div id="div02">---这里开始，包括后面所有的div，应该自动+1，如此处应该是div03
<input type="button" onclick="" value="新增"> <input type="button" value="删除">
</div>……<div id="div0N">
<input type="button" onclick="" value="新增"> <input type="button" value="删除">
</div>我选择div01里面的新增按钮，点击了新增后，会插入一个新的div02，应该将原有的div02，包括后面的层的id，都自动更名，改为div03，div04…… 这个如何做到呢？

Answer 1

你应该给所有DIV一个NAME，点击新增以后
先增加新的DIV
再用document.getElementsByName("name")来获取。。然后
for循环，给他们重新命名。。

Answer 2

$(function(){
$(".add").live("onclick",function(){
var parent = $(this).parent("div");
var id = parseInt(parent.attr("id").match("\d+$"));
var temp = id+1;
parent.nextAll("div").each(function(){
$(this).attr("id","div"+ (temp + 1).toString());
temp++;
});
//新增你要的div吧
});
});

Answer 3

jquery  JS实现那个  挺简单的！

Answer 4

再请教一个问题，为什么jquery，使用ajax post，提示：对象不支持此属性或方法？$.ajax

Answer 5

//保存跑一下，看看效果对不。
<script language="javascript">
var i=1;
function set(th)
{
i=i+1;
var click_div=th.parentNode //获取点击的div
    var clone_div=click_div.cloneNode(true);//克隆里面的内容   
click_id=click_div.id //获取id
clone_idnum=parseInt(click_id.replace("div",""))+1;

clone_div.innerHTML+="-->第"+i+"点击结果"; //增加显示效果
clone_div.id="div"+(clone_idnum)
clone_div.children[1].value="div"+(clone_idnum);//把div 的id显示到input var alldiv_parent = click_div.parentNode; //获取所有对象父级
    if(alldiv_parent.lastChild == click_div) //是否点的是最后一个div里的button
{  
  
   alldiv_parent.appendChild(clone_div);     } 
    else 
    {
     alldiv_parent.insertBefore(clone_div,click_div.nextSibling,click_div); //如果不是，则把新元素插入到目标元素和parent元素的下一个子元素的中间
 //目标元素后面的下一个兄弟节点是目标元素的nextSibling属性
   //重置所有div的id
 allnodes=alldiv_parent.childNodes
 for(j=0;j<allnodes.length;j++)
 {
    allnodes[j].id="div"+(j+1);
allnodes[j].children[1].value="div"+(j+1);//把div 的id显示到input
 }
   
    } }
</script>
<div id="div1"><input type="button" value="插入" onclick="set(this)"><input type="text" size=10 value="div1"></div>

Answer 6

好像报错：网页错误详细信息用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
时间戳: Wed, 17 Nov 2010 04:21:12 UTC
消息: 'allnodes[...].children.1' 为空或不是对象
行: 39
字符: 13
代码: 0
URI: http://localhost/2.htm
消息: 'allnodes[...].children.1' 为空或不是对象
行: 39
字符: 13
代码: 0
URI: http://localhost/2.htm

Answer 7

你再试试children 换成childNodes

Answer 8

还是报错网页错误详细信息用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
时间戳: Wed, 17 Nov 2010 05:48:03 UTC
消息: 'allnodes[...].childNodes.1' 为空或不是对象
行: 39
字符: 13
代码: 0
URI: http://localhost/2.htm如果是已经产生的新div，再去点击这个新增出来的div，在它基础上再接着新增，就会提示错误

Answer 9

<div id="box"> <div id="div1">
<input type="button" onclick="" value="新增" />
<input type="button" value="删除" />
</div> <div id="div2">
<input type="button" onclick="" value="新增" />
<input type="button" value="删除" />
</div> <div id="div3">
<input type="button" onclick="" value="新增" />
<input type="button" value="删除" />
</div></div><script type="text/javascript">document.getElementById("box").onclick = function(e){
var e = e || window.event,
target = e.target || e.srcElement;

if(target.value === "新增"){
var nextSibling = target.parentNode.nextSibling;
while(nextSibling){
if(nextSibling.nodeType == 1)
nextSibling.id = nextSibling.id.replace(/(\d+)/, function(word){ return parseInt(word) + 1; });

nextSibling = nextSibling.nextSibling;
}

var division = document.createElement("div");
division.id = target.parentNode.id.replace(/(\d+)/, function(word){ return parseInt(word) + 1; });
division.innerHTML = '<input type="button" onclick="" value="新增" /> <input type="button" value="删除" />';

this[ target.parentNode.nextSibling ? "insertBefore" : "appendChild" ](division, target.parentNode.nextSibling)
}
}</script>

Answer 10

用对象数组
每个DIV等于一个对象，将这些对象装到一个数组里，利用数组在页面中创建HTML元素
插入和删除操作时，修改数组内容，移除之前的HTML元素，根据新数组重新创建

Answer 11

我现在是用数组的。但是这样一来，会不会把对象中，如input的值给刷没了？

Answer 12

我加了一个删除的方法<script type="text/javascript">document.getElementById("box").onclick = function(e){
    var e = e || window.event,
        target = e.target || e.srcElement;
    
    if(target.value === "新增"){
        var nextSibling = target.parentNode.nextSibling;
        while(nextSibling){
            if(nextSibling.nodeType == 1)
                nextSibling.id = nextSibling.id.replace(/(\d+)/, function(word){ return parseInt(word) + 1; });
            
            nextSibling = nextSibling.nextSibling;
        }
        
        var division = document.createElement("div");
        division.id = target.parentNode.id.replace(/(\d+)/, function(word){ return parseInt(word) + 1; });
        division.innerHTML = '<input type="button" onclick="" value="新增" /> <input type="button" onclick="" value="删除" />';
        
        this[ target.parentNode.nextSibling ? "insertBefore" : "appendChild" ](division, target.parentNode.nextSibling)
    }
    if(target.value === "删除"){
        var nextSibling = target.parentNode.nextSibling;
        while(nextSibling){
            if(nextSibling.nodeType == 1)
                nextSibling.id = nextSibling.id.replace(/(\d+)/, function(word){ return parseInt(word) - 1; });
            
            nextSibling = nextSibling.nextSibling;
        }
         var box = target.parentNode.parentNode;
         box.removeChild(target.parentNode);
    }
}