logo标签列表

使用Javascript实现动态HTML

javascriptdhtml
3
我正在使用JavaScript在HTML中动态构建输入元素的网格。每行有4个输入元素，用户可以根据需要添加或删除行。每次添加或删除行时，我都会动态重建网格。
我的问题是，在第二次构建网格后，我无法引用任何元素。我认为DOM现在有两个具有相同名称的元素实例，并且在尝试按名称引用时会产生混淆。
我的问题是：是否有任何方法可以重置元素名称的DOM列表，以便在每次动态构建时，“重用”名称仍然是唯一的？
7
我们可以看看您的代码吗？ - Matt Ball
1
你是否在使用 document.getElementById() 来引用元素？ - Abboq
1
你是指“名称”而不是“ID”吗？ （IE鼓励人们混淆这两者）。 ID在页面上必须是唯一的，但名称则不必。 - Colin Fine
你每次都重建整个表格，而不是只添加/删除行，有什么特殊的原因吗？此外，尝试在构建表格时保存引用并重复使用这些引用，而不是搜索引用（例如使用getElementById）。 - RoToRa
2个回答
2

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

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

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

0
每行有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>

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接