Динамический HTML с использованием Javascript - PullRequest
Новая
       3

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

3 голосов
/ 28 июля 2010

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

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

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

Ответы [ 2 ]

2 голосов
/ 28 июля 2010

Вы можете присвоить идентификаторам узлов уникальный уникальный префикс при каждом создании сетки и включать их каждый раз, когда вы ссылаетесь на узел по идентификатору.

Или вы можете изменить свой код, чтобы не перестраивать всю сетку каждый развремя.

Однако я думаю, что вы, возможно, ошиблись в диагностике проблемы, или я не правильно понял ваш вопрос.Если вы не забыли удалить старый элемент таблицы из документа перед вставкой нового, не должно быть конфликтов по идентификаторам или именам.

0 голосов
/ 28 июля 2010

Каждая строка имеет 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>

Скопируйте / вставьте его в новый файл и попробуйте.Я уверен, что вы можете легко перенести функциональность на любую используемую вами библиотеку.

...