使用Javascript的动态HTML

Question

I am using javascript to dynamically build a grid of input elements in HTML. 我正在使用javascript动态构建HTML中的输入元素网格。 Each row has 4 input elements and the user can add or delete rows as they need. 每行有4个输入元素，用户可以根据需要添加或删除行。 Each time they add or delete a row, I am rebuilding the grid dynamically. 每次添加或删除行时，我都会动态重建网格。

My problem is after I build the grid a second time, I cannot reference any of the elements. 我的问题是在我第二次构建网格后，我无法引用任何元素。 I believe the DOM now has 2 occurances of each element with the same name, and is confused when I try to reference by name. 我相信DOM现在有两个具有相同名称的元素，并且在我尝试按名称引用时会感到困惑。

My question: is there any way to reset the DOM listing of element names, so on each dynamic build the "resued" name is still unique ? 我的问题：有没有办法重置元素名称的DOM列表，所以在每个动态构建中，“已恢复”的名称仍然是唯一的？

Answer 1

You can give the node ids a different unique prefix every time you create the grid and include that each time you reference a node by id. 您可以在每次创建网格时为节点ID指定不同的唯一前缀，并在每次通过id引用节点时包含该前缀。

Or you can change your code not to rebuild the whole grid every time. 或者您可以更改代码，而不是每次都重建整个网格。

However I think it might be that you've misdiagnosed the problem or I don't understand your question correctly. 但是我认为你可能误解了这个问题，或者我没有正确理解你的问题。 If you remember to remove the old table element from the document before inserting the new one, there should be no conflict over the ids or names. 如果您记得在插入新表元素之前从文档中删除旧表元素，则不应该对ID或名称产生冲突。

Answer 2

Each row has 4 input elements and the user can add or delete rows as they need. 每行有4个输入元素，用户可以根据需要添加或删除行。 Each time they add or delete a row, I am rebuilding the grid dynamically. 每次添加或删除行时，我都会动态重建网格。

Why rebuild? 为什么重建？ Insert a new row in the DOM or delete the existing one. 在DOM中插入新行或删除现有行。 Not a problem. 不是问题。

Here is a sample html file that uses prototype to add / delete rows: 这是一个示例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>

Copy / paste it to a new file and try it. 将其复制/粘贴到新文件并尝试。 I am sure you can easily port the functionality to whatever lib you are using. 我相信你可以轻松地将功能移植到你正在使用的任何lib。

使用Javascript的动态HTML

问题描述

2 个解决方案

解决方案1
2 2010-07-28 15:09:52

解决方案2
0 2010-07-28 15:13:43

使用Javascript的动态HTML

问题描述

2 个解决方案

解决方案1 2 2010-07-28 15:09:52

解决方案2 0 2010-07-28 15:13:43

解决方案1
2 2010-07-28 15:09:52

解决方案2
0 2010-07-28 15:13:43