使用Javascript的動態HTML

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 個解決方案

解決方案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