使用Javascript的动态HTML

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

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

我的问题：是否有任何方法来重置元素名称的DOM列表，所以在每个动态构建中，“resued”名称仍然是唯一的？

来源

2010-07-28 Jay Koury

我们能否看到您的代码？ – 2010-07-28 14:09:13

你使用'document.getElementById（）'来引用元素吗？ – Abboq 2010-07-28 14:13:50

你的意思是“名称”而不是“ID”？（IE鼓励人们混淆两者）。 ID在页面上必须是唯一的，但名称不一定是。 – 2010-07-28 14:15:07

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

或者你可以改变你的代码而不是每次重建整个网格。

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

来源

2010-07-28 15:09:52

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

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

来源

2010-07-28 15:13:43

使用Javascript的动态HTML

回答

相关问题