当前位置：文江博客话题详情

使用 Javascript 的动态 HTML

发布于 2024-09-12 04:13:59 字数 231 浏览 8 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三寸金莲 2024-09-19 04:13:59

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

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

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

回复收藏 0 原文

稚然 2024-09-19 04:13:59

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

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

Each row has 4 input elements and the
user can add or delete rows as they
need. 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. Not a problem.

Here is a sample html file that uses prototype to add / delete rows:

<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.

回复收藏 0 原文

~没有更多了~