Accueil > Forum > > > > balayer un tableau en javascript
balayer un tableau en javascript
mardi 20 novembre 2007 à 08:43:48 |
balayer un tableau en javascript

orionis1
|
bonjour à tous, Débutant en javasacript, je me heurte au problème suivant : Je développe une page html (couplée à du php) de saisie de bon de commande. J'ai trouvé ici [ Lien ]un exemple de tableau dynamique permettant la gestion de ligne. Jusque là, tout fonctionne correctement. J'aimerais à présent, à chaque ajout de ligne, vérifier préalablement que l'utilisateur a bien saisi une valeur dans toutes les zones. Comment faire pour balayer les 5 cellules de chaque ligne (un simple test d'existence des données suffirait)? Voici les fonctions JS permettant la gestion dynamique du tableau des lignes de commande : /* trouve le tag "parentTagName" parent de "element" */ function getParent(element, parentTagName) { if ( ! element ) return null; else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() ) return element; else return getParent(element.parentNode, parentTagName); }
/* ajoute une ligne */ function addLigne(link) { // 0. tester la saisie sur toutes les zones.
// 1. récuperer le node "TABLE" à manipuler var td = link.parentNode; var table = getParent(td,'TABLE'); // 2. on va manipuler le TBODY var tbody = table.tBodies[0]; // 3. on clone la ligne de reference var newTr = tbody.rows[0].cloneNode(true); tbody.appendChild(newTr); if ( document.all ) newTr.style.display = "block"; // pour IE else newTr.style.display = "table-row"; // pour Gecko }
/* supprimer une ligne */ function delLigne(link) { // 1. récuperer le node "TABLE" à manipuler var td = link.parentNode; var table = getParent(td, 'TABLE'); // 2. récuperer le TBODY var tbody = table.tBodies[0]; // 3. Supprimer le TR tbody.removeChild(getParent(td, 'TR')); }
window.onload = dtableInit;
/* initialise le script */ function dtableInit() { var table = document.getElementsByTagName('TABLE'); for ( var i = 0; i < table.length; i++ ) { // on récupère tous les tableaux dynamiques if ( table[i].className == 'dTable' ) { var tbody = table[i].tBodies[0]; var newTr = tbody.rows[0].cloneNode(true); // on masque la première ligne du tbody (la ligne de reference) tbody.rows[0].style.display = 'none'; // on en ajoute une tbody.appendChild(newTr); } } }
Et le code html correspondant : <table class='dTable' bgcolor="white" border="4"> <thead> <tr> <td bgcolor="#C4C4C4"><b>Part Number</td> <td bgcolor="#C4C4C4"><b>Description</td> <td bgcolor="#C4C4C4"><b>Prix unitaire HT</td> <td bgcolor="#C4C4C4"><b>Qté</td> <td bgcolor="#C4C4C4"><b>Total</td> <td bgcolor="#C4C4C4"><b>Action</td> </tr> </thead> <tbody> <tr> <td><input type="text" name="champ1[]" id="champ1"></td> <td><input type="text" size='100' name="champ2[]" id="champ2"></td> <td><input type="text" size='15' name="champ3[]" id="champ3"></td> <td><input type="text" size='5' name="champ4[]" id="champ4"></td> <td><input type="text" size='15' name="champ5[]" id="champ5"></td> <td><a href="#" onclick="delLigne(this); return false;">Supp</a></td> </tr> </tbody> <tfoot> <tr> <th colspan="3" align="left"><a href="#" onclick="addLigne(this); return false;">Ajouter une ligne</a></th> <th>TOTAL</th> <th>tot</th> <th></th> </tr> </tfoot> </table>
|
|
mardi 20 novembre 2007 à 09:37:28 |
Re : balayer un tableau en javascript

Anthed
|
Réponse acceptée !
Hello, Pour parcourir ton tableau : var table = document.getElementById("ton_tableau"); var row; var cell; var element; for (var i = 0; i < table.rows.length; i++) { row = table.rows[i]; for (var j = 0; j < row.cells.length; j++) { cell = row.cells[j]; // ex1 : cellule contenant directement du texte. alert("Contenu de la cellule [" + i + ";" + j + "] : " + cell.innerHTML); // ex2 : cellule contenant un champ de saisie. element = cell.firstChild; if (element != null && element.tagName == "INPUT") { alert("Contenu du champ dans la cellule : " + element.value); } } }
A toi d'adapter les tests dans la 2ème boucle 'for' pour récupérer ce qui t'intéresse en fonction de la cellule concernée. Remarques : 1. les crochets dans tes noms d'inputs ne sont pas forcément conseillés : champ2[] 2. tu peux remplacer : <a href="#" onclick="delLigne(this); return false;">Supp</a> par :
<a onclick="javascript:delLigne(this);">Supp</a>
|
|
mardi 20 novembre 2007 à 09:52:09 |
Re : balayer un tableau en javascript

orionis1
|
Merci anthed pour ta réponse rapide. Juste une remarque : actuellement, le tableau en question est déclaré avec une classe (class dTable), utilisée dans la fonction dTableInit().
Comment définir alors la variable table dans ta proposition? A ma connaissance, on ne peut pas déclarer à la fois une classe et un Id?
|
|
mardi 20 novembre 2007 à 10:02:50 |
Re : balayer un tableau en javascript

bultez
|
Réponse acceptée !
Bonjour,
>>J'aimerais à présent, à chaque ajout de ligne, vérifier préalablement
que >>l'utilisateur a bien saisi une valeur dans toutes les zones. euh... quand on ajoute une ligne, ces champs de saisie sont vides ou alors on veut contrôler la ligne précédente ? et dans ce cas, quid de la dernière ?
>>Comment faire pour balayer les 5 cellules de chaque ligne rowIndex c'est le n° de ligne document.name du formulaire['champ1[]'][index de la ligne].value c'est le contenu du 1er champ de la ligne voulue
>>un simple test d'existence des données suffirait? pour contrôler ? à priori non... une quantité, se doit d'être numérique, par exemple
encore une remarque : tel que c'est fait on se retrouve avec des champs multiples qui ont le même ID... ce qui est interdit.
Cordialement Bul [mon Site] [M'écrire]
|
|
mardi 20 novembre 2007 à 10:04:33 |
Re : balayer un tableau en javascript

bultez
|
Réponse acceptée !
ou alors, on contrôle toutes les lignes avant l'envoi ?
Cordialement Bul [mon Site] [M'écrire]
|
|
mardi 20 novembre 2007 à 10:13:43 |
Re : balayer un tableau en javascript

orionis1
|
>euh... quand on ajoute une ligne, ces champs de saisie sont vides ou alors on veut contrôler la ligne précédente ?
On contrôle la ligne précédente, dans mon idée.
>et dans ce cas, quid de la dernière ?
Heu, je ne sais pas...
>
ou alors, on contrôle toutes les lignes avant l'envoi ?
Oui, ça reste une solution peut-être plus imple à programme dans la page php (du moins, je sais faire). Reste à savoir comment mémoriser les X cellules des Y lignes ajoutées?
|
|
mardi 20 novembre 2007 à 11:22:38 |
Re : balayer un tableau en javascript

Anthed
|
Réponse acceptée !
Dans ta fonction qui ajoute une ligne, il suffit d'affecter à chaque input de chaque cellule un nom unique : input.id = "champ_" + i + "_" + j; où i et j peuvent désigner respectivement le numéro d'ordre de la ligne et de la cellule concernées.
A toi de voir si tu conserves le système de clonage de lignes de ta fonction addLigne ou si tu crées une véritable nouvelle ligne (tu peux garder ton clonage et modifier les id après).
|
|
mardi 20 novembre 2007 à 11:29:55 |
Re : balayer un tableau en javascript

orionis1
|
OK, merci Anthed, mais je ne parviens toujours pas à récupérer l'objet tableau avec la ligne : var table = document.getElementById("ton_tableau");
|
|
mardi 20 novembre 2007 à 11:35:14 |
Re : balayer un tableau en javascript

Anthed
|
Réponse acceptée !
Il faut ajouter l'attribut id à ton tableau : <table class='dTable' bgcolor="white" border="4" id="ton_tableau"> class et id sont deux notions indépendantes, elles coexistent sans problème. A+.
|
|
mardi 20 novembre 2007 à 11:37:22 |
Re : balayer un tableau en javascript

orionis1
|
d'accord, c'était mon souci! je teste et te tiens au courant. merci
|
|
Cette discussion est classée dans : ligne, table, var, element, tbody
Répondre à ce message
Sujets en rapport avec ce message
Créer une ligne dans une table (en 1ere position) [ par lipao ]
bonjour c'est tout bete, tout est dans le titre... je voudrais créer une ligne dans une table et qu'elle soit la 1ère ligne c'est à dire passer de
Suppression d'une ligne d'un tableau js [ par alaska749 ]
Bonsoir, Après avoir souffert pour créer une simple table dynamique en javascript, je doit maintenant pouvoir supprimer n'aimporte quelle ligne de ce
Recupérer la value d'un input généré via JS [ par caviar ]
Re saluté ...Je suis encore sur la génération d'un formulaire avec autoincrémentation des lignes...j'ai trouvé un bon script qui me permet de générer
Vérification questionnaire CheckBox [ par sushiw ]
Bonjour, Je suis en train de créer un site dans lequel j'ai un questionnaire assez long avec a chaque ligne une affirmation et en face, 5 checkbox. (
table de multiplication [ par meryazer ]
salut j'ai un probleme , je desire afficher la table de multiplication dans un textarea d'un nombre saisi dans un autre, en cliquant sur un bouton, vo
Fonction sauvegarde [ par arthrax ]
Bonjour,Je débute avec le javascript et voici mon problème.Pour résumer, c'est une page html qui affiche un tableau et pour chaque ligne, je peux s
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
changer la couleur d'une Row dans une asp:table [ par Oho2 ]
Boujour à tous,Je souhaiterais changer la couleur d'une ligne d'un tableau quand on passe la souris dessus("onmouseover"). Mon problème est que je n'a
calendrier qui ne fonctionne pas [ par da vince ]
Salut, I need some help...Pourquoi ça marche pas?J'ai pas de message d'erreur mais rien ne s'affiche dans le navigateur...PS: y-a-t-il moyen de joindr
Empecher le retour à la ligne [ par John_Doe_88 ]
Bonjour à tous,Une petite question pas trop dure :J'ai une table html et j'aimerais empecher chaque cellule de revenir à la ligne (l'idéal serait de
Livres en rapport
|
Derniers Blogs
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 SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
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
|