begin process at 2012 05 29 00:23:04
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

balayer un tableau en javascript


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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&eacute;</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

Membre Club
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

Membre Club
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

1 2 3 4 5

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


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,172 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales