Динамический HTML с использованием Javascript

Я использую javascript для динамической сборки сетки элементов ввода в HTML. Каждая строка имеет 4 элемента ввода, и пользователь может добавлять или удалять строки по мере необходимости. Каждый раз, когда они добавляют или удаляют строку, я динамически восстанавливаю сетку.Динамический HTML с использованием Javascript

Моя проблема заключается в том, что я создаю сетку во второй раз, я не могу ссылаться ни на один из элементов. Я считаю, что DOM теперь имеет 2 события каждого элемента с тем же именем и сбивается с толку, когда я пытаюсь ссылаться по имени.

Мой вопрос: есть ли способ сбросить список объектов имен объектов, поэтому при каждой динамической сборке имя «resued» по-прежнему уникально?

источник

2010-07-28 Jay Koury

Можем ли мы увидеть ваш код? –

Вы используете 'document.getElementById()' для ссылки на элементы? – Abboq

Вы имеете в виду «имя», а не «id»? (IE побуждает людей путать их обоих). 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

Динамический HTML с использованием Javascript

ответ

Смежные вопросы