Accueil > Forum > > > > Ajout/Suppresion personalisé
 Ajout/Suppresion personalisé
vendredi 9 septembre 2011 à 13:14:07 |
Ajout/Suppresion personalisé
pc3456
|
bon j'ai un champs où je doit remplir une liste d'information, j'ai décidé d'éviter de laisser à l'utilisateur de remplir un champs en séparant les éléments par un ";" ou un truc comme ça
pour se faire j'ai créé deux fonction javascript pour ajouter/supprimer dans cette liste
à chaque fois l'utilisateur clique sur un bouton ajouter la valeur du champs texte est ajouté dans un champs hidden et pour permettre la suppression l'élément luis apparaît sous forme d"un texte avec une petite icone appropriée. j'ai laissez un div pour cela ainsi pour n'afficher que 4 éléments par lignes les élément sont contenu chacun dans span et le span dans div qui va contenir 4 span; ces div sont ajouté au niveau du div que j'i laissé.
mon problème c'est que rien ne se passe lorsque je clique sur ajouter
voici le code:
Code Javascript :
function AjouterItem()
{
var c = document.getElementById('Item').value;
var NewDiv = document.createElement("div");
var NewSpan = document.createElement("span");
var texte = document.createTextNode(c+"<img src='./emploi-stage/images/Delete.png onClick='SupprimerItem(this.parentNode,"+c+")></img>'");
var liste = document.getElementById('ListeItems');
if(liste.childNodes.length == 0)
{
NewDiv.setAttribute("id","Items0");
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewDiv.appendChild(NewSpan);
liste.appendChild(NewDiv);
document.getElementById("Items").value += c;
}
else if(liste.lastChild.childNodes.length == 4)
{
NewDiv.setAttribute("id","Items"+liste.childNodes.length);
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewDiv.appendChild(NewSpan);
liste.appendChild(NewDiv);
document.getElementById("Items").value += ";"+c;
}
else
{
NewSpan.setAttribute("id","Item"+liste.lasChild.childNodes.length);
NewSpan.appendChild(texte);
liste.lasChild.appendChild(NewSpan);
document.getElementById("Items").value += ";"+c;
}
}
function SupprimerItem(objet,Item)
{
var listeItems = document.getElementById("Items").value;
var table = listeItem.split(";");
for(i=0;i<table.length;i++)
{
if(table[i] == Item)
{
table.splice(i,i);
break;
}
}
//suppression de noeud
//si c'est le span est le seul dans le div on supprime le div
if(objet.parentNode.childNodes.length == 1)
{
document.getElementById("ListeItems").removeChild(objet.parentNode);
}
//sinon on supprime le span
else
{
objet.prentNode.removeChild(objet);
}
}
|
|
vendredi 9 septembre 2011 à 13:26:04 |
Re : Ajout/Suppresion personalisé
pc3456
|
autre chose c'est je trouve pas d'où je peux modifier mon sujet je veux rajouter des explications mais bon je vais décrire ici
pour le if(liste.childNodes.length == 0) : si le div principale ne contient aucun div je créé un nouveau avec nouveau span
else if(liste.lastChild.childNodes.length == 4) : si le dernier div fils contient déjà 4 span je crée un nouveau div
else c'est créer juste un span et le mettre dans le dernier div fils
|
|
vendredi 9 septembre 2011 à 14:57:10 |
Re : Ajout/Suppresion personalisé
kazma
|
bonjour
j'ai pas tout bien regardé mis deja il y a une ligne qui me parait louche
Code Javascript : var texte = document.createTextNode(c+"<img src='./emploi-stage/images/Delete.png onClick='SupprimerItem(this.parentNode,"+c+")></img>'"; si cette ligne sert a inserer une image c'est pas possible de cette facon il faudrait utiliser innerHtml
Code Javascript : var texte = c+"<img src='./emploi-stage/images/Delete.png' onClick='SupprimerItem(this.parentNode,"+c+")'></img>"; Code Javascript : |
|
vendredi 9 septembre 2011 à 18:42:41 |
Re : @ kazma
pc3456
|
merci bien effectivement il y a beaucoup d'erreur sur mon code
c'est la première fois que je crée une fonction qui agit sur le contenu d'une page web et j'ai remarqué beaucoup de chose
déjà il fallait créer un élément img et remplir les attributs par setAttribute
la façon que j'ai fait la il écrit le texte comme il est
deuxième chose c'est que les espace sont compté comme un contenu texte du div c'est pour cela il ne tombe pas sur le premier if le reste contient des erreur de syntaxe donc il n’exécute rien chose que j'ai remarqué aussi
javascript n'affiche aucune erreur et en plus n'exécute pas le bout de code
je me bat maintenant avec la fonction de suppression...
|
|
vendredi 9 septembre 2011 à 18:52:15 |
Re : Ajout/Suppresion personalisé
kazma
|
si tu utilise firefox il existe une extention qui donne le code generé tu poura mieux voire ou sa coince elle se trouve a cette adresse web developer
|
|
vendredi 9 septembre 2011 à 19:23:18 |
Re : Ajout/Suppresion personalisé
pc3456
|
ça marche maintenant
pour supprimer il y a un nom de variable incomplet (ListeItems à la place de ListeItem dans la deuxième ligne)+ parentNode à la place de prentNode (dernière ligne du code )voici le code final reste un atout c'est réorganiser les élément après suppression (4 pr ligne) mais je trouve pour le moment délicat
Code Javascript :
function AjouterItem()
{
var c = document.getElementById('Item').value;
var NewDiv = document.createElement("div");
var NewSpan = document.createElement("span");
var texte = document.createTextNode(c);
var icone = document.createElement("img");
icone.setAttribute("src","./emploi-stage/images/Delete.png");
icone.setAttribute("onClick","javascript:SupprimerItem(this.parentNode,'"+c+"');");
icone.setAttribute("style","cursor:pointer;");
var liste = document.getElementById('ListeItems');
alert(liste.lastChild);
alert(liste.childNodes.length);
if(liste.childNodes.length == 0)
{alert(NewDiv);
NewDiv.setAttribute("id","Items0");
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewSpan.appendChild(icone);
NewDiv.appendChild(NewSpan);
liste.appendChild(NewDiv);
document.getElementById("Items").value += c;
}
else if(liste.lastChild.childNodes.length == 4)
{
NewDiv.setAttribute("id","Items"+liste.childNodes.length);
NewSpan.setAttribute("id","Item0");
NewSpan.appendChild(texte);
NewSpan.appendChild(icone);
NewDiv.appendChild(NewSpan);
liste.appendChild(NewDiv);
document.getElementById("Items").value += ";"+c;
}
else
{
NewSpan.setAttribute("id","Item"+liste.lastChild.childNodes.length);
NewSpan.appendChild(texte);
NewSpan.appendChild(icone);
liste.lastChild.appendChild(NewSpan);
alert(liste.lastChild.childNodes.length);
document.getElementById("Items").value += ";"+c;
}
}
function SupprimerItem(objet,Item)
{
var listeItems = document.getElementById("Items").value;
var table = listeItems.split(";");
for(i=0;i<table.length;i++)
{
if(table[i] == Item)
{
table.splice(i,i);
break;
}
}
//suppression de noeud
//si c'est le span est le seul dans le div on supprime le div
if(objet.parentNode.childNodes.length == 1)
{
document.getElementById("ListeItems").removeChild(objet.parentNode);
}
//sinon on supprime le span
else
{
objet.parentNode.removeChild(objet);
}
}
|
|
vendredi 9 septembre 2011 à 19:27:08 |
Re : Ajout/Suppresion personalisé
pc3456
|
j'ai par vu ton message je trouve très intéressante une telle extension vu que javascript n'affiche pas d'erreurs, merci 
j'avait décidé de ne pas écrire de grandes fonctions avec javascript hhh |
|
vendredi 9 septembre 2011 à 19:41:58 |
Re : Ajout/Suppresion personalisé
pc3456
|
une mise à jour de la fonction supprimer car j'ai oublié de corriger la valeur du champs hidden
Code Javascript :
function SupprimerItem(objet,Item)
{
var listeItems = document.getElementById("Items").value;
var table = listeItems.split(";");
for(i=0;i<table.length;i++)
{
if(table[i] == Item)
{
table.splice(i,i);
break;
}
}
//mettre les nouvelle valeurs dans le champs hidden
var nouvelleValeur = "";
for(i=0;i<table.length;i++)
{
if(i !=0)
nouvelleValeur += ";"
nouvelleValeur += table[i];
}
document.getElementById("Items").value = nouvelleValeur;
//suppression de noeud
//si c'est le span est le seul dans le div on supprime le div
if(objet.parentNode.childNodes.length == 1)
{
document.getElementById("ListeItems").removeChild(objet.parentNode);
}
//sinon on supprime le span
else
{
objet.parentNode.removeChild(objet);
}
}
aussi il faut enlever les alert c'était pour les test |
|
Cette discussion est classée dans : liste, document, div, appendchild, newspan
 Répondre à ce message
 Sujets en rapport avec ce message
div value [ par bossou ]
bonjour à tous. je voudrais vous remercier tout un chacun pour les réponses pertinentes que vous apportez sur ce site. j'ai un autre problème dans le
Ajout d'un script dans un div de facon dynamique [ par zen69 ]
Salut à tous,Premierement je ne suis pas sur de poster dans le bon theme alors pas la peine de me tapper sur la tete pour ca...Bon j'ai un probleme...
génération d'un menu [ par neg03 ]
Bonjour, je souhaite utiliser une fonction javascript pour créer un menu :function menu(div){ var b = document.createElement('b'); div.appendChild(b)
scrollTop dans div [ par ICIoBRa ]
Salut à tous, j'ai une page avec ceci :"ex">Avec cette fonction :function pos<
Récupération de variable [ par romain14g59 ]
Bonjour a tous voila j'ai trouver ce script !! http://www.mozilla.org/editor/midasdemo/ il fonctionne nikel mais mon probléme et la récupération du te
javascript récupérer variable [ par ahcorad ]
Bonjour,Mon code fonctionne bien sauf pour récupérer les valeurs de ma liste déroulante.Voici mon code :<meta http-equiv="Content-Type" content="text/
creation d'un div [ par kazma ]
Bonjourj'ai cree un div de cette facon ( document.body.appendChild(document.createElement('div')).setAttribute("id","div_de_table");) j'usqu'ici aucun
Recuperation d'ID DE DIV [ par grandpa006 ]
Bonjour,Voila je voudrais recuperer l'ID de mes DIV en meme temps que le click de la souris mais j'y arraive pas.Si une ame charitable a une idée se s
Appel d'une fonction au chargement d'une DIV ? [ par sphaxslayer ]
Bonjour tout le monde,voilà je me tourne vers vous car j'ai un petit souci qui, j'en suis sûr, sera de la broutille pour vous... En fait, je suis (bêt
Probleme setAttribute dans une table dynamique [ par ShivaanKeldon ]
Bonjour J'ai créé un petit outil de comptage de points pour le tarot, en javascript. le calcul en lui meme fonctionne très bien, mais c'est au niveau
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|