ansaurus

Question

Answer 1

+2 A:

You can give the node ids a different unique prefix every time you create the grid and include that each time you reference a node by id.

Or you can change your code not to rebuild the whole grid every time.

However I think it might be that you've misdiagnosed the problem or I don't understand your question correctly. If you remember to remove the old table element from the document before inserting the new one, there should be no conflict over the ids or names.

Jason Orendorff 2010-07-28 15:09:52

Answer 2

A:

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"&gt;&lt;/script&gt;

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

seanizer 2010-07-28 15:13:43

ansaurus

tags:

views:

answers:

Dynamic HTML using Javascript.

related questions