Chaque ligne a 4 éléments d'entrée et l'utilisateur peut ajouter ou supprimer des lignes comme ils besoin. Chaque fois qu'ils ajoutent ou suppriment une ligne , je reconstruis la grille dynamiquement.
Pourquoi reconstruire? Insérez une nouvelle ligne dans le DOM ou supprimez celle existante. Pas de problème.
Voici un exemple de fichier html qui utilise un prototype pour ajouter/supprimer des lignes:
<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>
Copier/coller dans un nouveau fichier et l'essayer. Je suis sûr que vous pouvez facilement transférer la fonctionnalité vers la librairie que vous utilisez.
Pourrions-nous voir votre code? –
Utilisez-vous 'document.getElementById()' pour référencer les éléments? – Abboq
Vous voulez dire "nom" et non "id"? (IE encourage les gens à confondre les deux). Les ID doivent être uniques sur la page, mais les noms ne doivent pas nécessairement l'être. –