Question

我正在使用javascript在HTML中动态构建输入元素网格。每行有4个输入元素，用户可以根据需要添加或删除行。每次添加或删除行时，我都会动态重建网格。

我的问题是我第二次构建网格后，我无法引用任何元素。我相信DOM现在每个元素有两个相同的名称出现，当我尝试按名称引用时会感到困惑。

我的问题：有没有办法重置元素名称的DOM列表，所以在每个动态构建中，“已恢复”的名称仍然是唯一的？

Answer 1

每次创建网格时，您都可以为节点ID指定不同的唯一前缀，并在每次按ID引用节点时包含该前缀。

或者您可以更改代码，而不是每次都重建整个网格。

但是我认为你可能误解了这个问题或者我没有正确理解你的问题。如果您记得在插入新表元素之前从文档中删除旧表元素，则不应该对ID或名称产生冲突。

Answer 2

每行有4个输入元素和用户可以添加或删除行需要。每次他们添加或删除一个我正在重建网格动态。

为什么要重建？在DOM中插入新行或删除现有行。不是问题。

以下是使用原型添加/删除行的示例html文件：

<html>
<head>

<style>
<!--
a,input{
    margin: .2em;
}
-->
</style>

<script type="text/javascript"
    src="http://api.prototypejs.org/javascripts/prototype.js"></script>

<script type="text/javascript">

function createGrid(id){
    addRow($(id),0);
}

function deleteRow(elem, index){
    elem.children[index].remove();
}

function addRow(elem, index){
    var row = new Element('div',{'class':'row'});
    for(var i = 0; i < 4; i++){
        row.insert({
            bottom: new Element('input',{'type':'text'})
        });
    }
    row.insert({
        bottom: new Element('a',{'href':'#'})
            .update('Add Row')
            .observe('click',function(event){
                var row = Event.element(event).up();
                var addIndex = $A(row.up().children).indexOf(row);
                addRow(elem, addIndex);
                Event.stop(event);
        })
    }).insert({
        bottom: new Element('a',{'href':'#'})
            .update('Delete Row')
            .observe('click',function(event){
                var row = Event.element(event).up();
                var delIndex = $A(row.up().children).indexOf(row);
                deleteRow(elem, delIndex);
                Event.stop(event);
        })
    });
    if(index > 0){
        elem.children[index-1].insert({after:row});
    }else{
        elem.insert({top:row});
    }
}

Event.observe(window,"load",function(){
    createGrid('grid');
});
</script> 

</head>
<body>

<div id="grid">
</div>

</body>
</html>

将其复制/粘贴到新文件并尝试。我相信你可以轻松地将功能移植到你正在使用的任何lib。

使用Javascript的动态HTML

2 个答案: