balayer un tableau en javascriptRésolu

Question

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 http://www.the-asw.com/post/2005/09/18/50-une-interface-de-formulaire-a-base-de-tableaux-dynamiques 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 : ---- Part Number, Description, Prix unitaire HT, Qté, Total, Action, ---- , , , , , Supp, ---- Ajouter une ligne | TOTAL | tot | |

cs_bultez · Accepted Answer

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.





<hr />                Cordialement             Bul

Anthed · Answer

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 :

[# Supp]

par :

Supp

orionis1 · Answer

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?

cs_bultez · Answer

ou alors, on contrôle toutes les lignes avant l'envoi ?
<hr />                Cordialement             Bul

orionis1 · Answer

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

Anthed · Answer

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

orionis1 · Answer

OK, merci Anthed, mais je ne parviens toujours pas à récupérer l'objet tableau avec la ligne : 
var table = document.getElementById("ton_tableau");

Anthed · Answer

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

orionis1 · Answer

d'accord, c'était mon souci!
je teste et te tiens au courant.
merci

orionis1 · Answer

Bon, ça avance, je parviens à détecter correctement la présence ou l'absence de données dans chacune des cellule.

Le blocage suivant intervient sur l'affectation de l'id unique à chaque cellule avec la commande 
input.id  = "champ_" + i + "_" + j;

J'ai l'erreur "input est indéfini"...

Anthed · Answer

Pour chaque cellule, tu peux tenter quelquechose du style :
cell = ... // ta cellule récupérée précédemment
var input;
if (cell.children != null) {
  for (var k = 0; k < cell.children.length; k++) {    
    input = cell.children[k];    if (input !null && input.tagName "INPUT") {        
      // input trouvé : tu peux lui affecter son id
      input.id = ...
    }
  }
}

Pour des histoires de compatibilité de code pour tous les navigateurs, je te laisse vérifier si childNodes est plus aproprié que children ...

orionis1 · Answer

C'est nickel, ça fonctionne aussi bien sur IE que FF (et ça suffira comme ça avec les navigateurs!). 

Par contre, comment récupérer dans ma page php les valeurs de ces cellules dont je connais à présent les Id?
Jusqu'à maintenant, je conservais les valeurs des autres champs saisis en rappelant la page html avec ceux-ci passés en paramètre de l'adresse (je ne sais faire qu'ainsi...), avec cette fonction :

    function refresh()
        {
        var num_cde_client;
        num_cde_client = '';
        (...)       
        num_cde_client = document.boncde.num_cde_client.value;
     document.location='{#LIEN}'+'?&num_cde_client='+num_cde_client+'&date_dde='+date_dde+'&societe='+societe+'&adresse='+adresse+'&demandeur='+demandeur+'&tel='+tel+'&constructeur='+constr+'&createur='+creat+'&client='+cli;

Anthed · Answer

Si ton tableau est inclus dans un formulaire, un form.submit() dudit formulaire devrait amplement suffire (l'attribut "action" de ce formulaire étant valorisé avec l'URL désirée).

orionis1 · Answer

Ca ne fonctionne pas, je récupère bien les valeurs des autres champs saisis, mais pas celles des lignes ajoutées.
Voici le code de mon bouton de validation :

Anthed · Answer

Je te conseille, pour savoir réellement ce qui est construit et ce qui est envoyé, d'utiliser les plugins de FireFox pour vérifier le contenu DOM de ta page (Firebug) et les champs envoyés dans ta requête (Tamper Data).
A+.

Anthed · Answer

N'oublie pas de vérifier la présence et l'unicité des noms de tes inputs ...

orionis1 · Answer

bon, je regarde ça.
Merci, en tout cas.

orionis1 · Answer

J'ai installé FireBug, je ne connaissais pas, c'est bien pratique!
Je parviens maintenant à imposer un Id à toutes les zones saisies.
Reste à récupérer ces valeurs lorsqu'on valide la saisie globale.
Les autres valeurs du formulaire sont repassées en paramètre de l'adresse de la page à chaque changement de zone, donc pas de souci de ce côté-là.
Par contre, impossible de récupérer les valeurs des lignes pour lesquelles j'ai imposé l'Id dans la page php, même si je détecte bien l'action sur le bouton de validation.
Le print_r($_POST) n'affiche en effet que les 'autres' valeurs.
Une idée? :o)

Anthed · Answer

Hello,

Une solution un peu sauvage mais qui devrait marcher consiste effectivement à construire "manuellement" l'url avec tous les paramètres qui t'intéressent.

var form = document.forms["le_nom_de_ton_formulaire"];

function getParams() {
    var i;
    var param = "";
    var element;
    var name;
    var value;
    for (i = 0; i < form.elements.length; i++) {
        element = form.elements[i];
        name = element.name;
        if (name != "") {
            value = element.value;
            if (value != "") {
                if (param != "") {
                    param += "&";
                }
                param += name + "=" + value;
            }
        }
    }
    return param;
}

getParams() retourne alors une chaîne du style : "name1=value1&name2=value2&...&nameN=valueN'
que tu n'as plus qu'à concaténer à ton url de départ.

Voila :)
A+.

orionis1 · Answer

Cette fonction, je l'appelle au moment de la validation du formulaire?
Comme ça? :


Parce qu'avec cette solution, je retrouve encore une fois les autres valeurs, mais pas celle avec un Id en "champ_*_*", alors qu'elle sont identifiées! :-/

orionis1 · Answer

D'autre part, j'ai dans FireBug (en plusieurs exemplaires), les messages d'erreur suivants :
uncaught exception: Permission refusée d'appeler la méthode Location.toString

orionis1 · Answer

Ah, je pense avoir trouvé : il fallait aussi alimenter la propriété "name" de chaque cellule en input... ou alors travailler avec Id dans ta fonction "sauvage".

D'ailleurs, quelle est la différence entre Id et name?

Anthed · Answer

Pour ce qui concerne la récupération des valeurs, il vaut mieux travailler sur les names que sur les ids.

Ensuite, pour faire plus clair et plus propre, modifie l'attribut onclick de ton input :
onclick="submitForm();"
où submitForm() doit ressembler à peu près à ça :

function submitForm() {
  if (confirm('Creation du bon de commande?')) {
    var form = document.forms["le_nom_de_ton_formulaire"];
    form.action = "ton_url?" + getParams();
    form.submit();
  }
}

A+.

Anthed · Answer

Différence entre name et id :

- name est le nom envoyé lorsque tu soumets ton formulaire et que tu devrais récupérer automatiquement au niveau de ton serveur sans à avoir à ajouter name=value à ton url (problème en cours "d'élucidation" ...)

- id est l'identifiant que l'on peut associer à n'importe quel élément HTML pour le manipuler dynamiquement via document.getElementById() par exemple.

Anthed · Answer

Normalement, document.forms["formulaire"].submit(); est équivalent, au niveau du serveur à lui envoyer l'url : url?champ=valeur

orionis1 · Answer

D'ac, merci pour les explications! :o))
Je teste tout ça.

Encore merci pour ton aide précieuse.

Anthed · Answer

Petite faute de frappe dans mon précédent message : tu peux essayer d'appeler submitForm() avec ce genre de formulaire bidon. Tant que tu ne récupères pas la valeur du champ au niveau de ton serveur, c'est qu'il y a un problème. Si tout va bien, les champs contenus dans ton tableau, lui-même inclus dans ton 'vrai' formulaire devraient passer aussi. Bonne continuation.

orionis1 · Answer

J'essaie maintenant de mettre à jour les totaux de mon formulaire au fur et à mesure de la saisie des lignes.
Dans un premier temps, et pour visualiser les changement, j'applique une coloration à la partie de je veux atteindre.
Pourquoi ne puis-je atteindre que le tableau 'tab_tot' et pas la cellule 'totht'?

Total &euro;uro HT


... avec ce code :
var cell_tot_ht = document.getElementById("tab_tot"); [ou getElementById("totht")]
cell_tot_ht.bgColor="#CCFFCC";

Anthed · Answer

N'hésite pas à tester ton code avec, par exemple :
alert(cell_tot_ht) pour vérifier que, déjà, ton élément est trouvé.
Ensuite, une petite modif du type :
cell_tot_ht.style.backgroundColor = "#CCFFCC";

devrait marcher.
Tu peux consulter les codes à dispo sur CS pour voir tout ce que tu peux faire avec element.style ...

Tchô.

orionis1 · Answer

var lg = document.getElementById("tab_tot").childNodes.length;
alert('lg->'+lg);
var cell_tot_ht = document.getElementById("tab_tot").childNodes[0].nodeValue;
alert('valeur1->'+cell_tot_ht);	
var cell_tot_ht = document.getElementById("tab_tot").childNodes[1].nodeValue;
alert('valeur2->'+cell_tot_ht);	

En fait, je détecte la 'longueur' de mon tableau 'tab_tot' : 2
Le 2, c'est bien pour le nombre de <td>?

Après, j'ai 'valeur1->' et 'valeur2->null'

Anthed · Answer

N'aurais-tu pas oublié les lignes ... table.rows retourne un tableau de ligne Pour chaque ligne, table.rows[i].cells retourne un tableau contenant les cellules de la ligne en question Encore un conseil pour débugguer : pour être sûr de ton élément : alert(element.innerHTML) (quand c'est possible, ça dépend du type) alert(element.tagName) (très utile : le type de l'élément -> '' dans ton cas au lieu de '') A+.

orionis1 · Answer

Merci pour tes derniers conseils, ça avance doucement...

orionis1 · Answer

J'en suis à la gestion de la suppression d'une ligne.
La suppression en elle-même fonctionne bien, mais je ne parviens pas à récupérer une des valeurs (le montant HT en l'occurence) pour la déduire du total HT de mon formulaire.
Actuellement, j'ai ça :

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];

// 2bis. récupérer la valeur HT de la ligne pour la soustraire au total HT du bon de commande.
var ligne=getParent(td,'TR');

alert(ligne.innerHTML); => renvoie la structure complète de la ligne
alert(ligne.nodeName); => renvoie bien 'TR'

// 3. Supprimer le TR
tbody.removeChild(getParent(td,'TR'));
}

Anthed · Answer

Ce n'est pas plutôt dans une des TD de la ligne que tu peux récupérer ton montant (plutôt que dans le contenu de la ligne en entier) ?

orionis1 · Answer

Si, si, bien sûr...

orionis1 · Answer

(oups, cliqué trop vite)
Mais si je demande le getParent(td,'TD'), je me retrouve avec les infos de la cellule sur laquelle j'ai cliqué pour supprimer la ligne.
Or, les infos que je cherche sont placées dans la cellules précédente.
Je me disais qu'il fallait que je remonte jusqu'au TR pour redescendre ensuite au TD qui contient ma valeur.
J'ai juste?

Anthed · Answer

Voui !
Seulement, après :
var ligne=getParent(td,'TR');

il faut parcourir les cellules à la recherche de celle qui contient ton montant, à moins que tu ne connaisses son indice. Par exemple, si tu sais que c'est la troisième :
var cell = ligne.cells[2];

Une fois la cellule trouvée, si elle contient un input (en première position)
var amount = cell.firstChild.value;

S'il ne s'agit pas forcément du premier élément de ta cellule, un petit parcours des éléments avec test de l'attribut tagName de chacun d'entre eux jusqu'à obtenir 'INPUT' devrait fonctionner.
A+.

orionis1 · Answer

Ah bé oui, forcément, ça paraît plus simple! :o)
Alors, c'est bon jusqu'à la définition de cell.
En fait, ma zone n'est pas en input, puisque c'est le montant HT calculé à partir de la qté (saisie) et du montant unitaire (saisi).
Dans la partie 'saisie' et malgré les lignes :

with(input)
{					
value = totht.nombreFormate(2,",","");
id = "champ_" + i + "_" + j;
name = "champ_" + i + "_" + j;
nodeValue = totht.nombreFormate(2,","," ");
}

nodeValue donne bien la valeur affichée dans la cellule, mais je ne parviens pas à lui forcer un Id et un Name, donc j'imagine que ça m'empêche de récupérer maintenant sa valeur?

orionis1 · Answer

Avec ça, ça a l'air de fonctionner.
Reste à le soustraire au total HT à l'autre bout du formulaire! ;o)

var ligne=getParent(td,'TR');
var cell = ligne.cells[4];
var ht_suppr = cell.firstChild.nodeValue;

Merci pour ton aide! :o)))

Anthed · Answer

Et si tu mets le tout dans une fonction avec un
return nodeValue;

tu peux récupérer ta valeur à l'endroit souhaité isn't it?

orionis1 · Answer

Disons que pour l'instant, je cherche à faire un truc qui fonctionne, ce serait déjà pas mal!

orionis1 · Answer

Re-bonjour, Mon projet avance (oui, je sais, j'écris toujours ça, mais c'est vrai ;o) Je butte actuellement sur ceci : je saisis un montant unitaire du port pour mon bon de commande, et je voudrais que le total du port s'affiche à partir de cette saisie. Pour l'instant, la quantité est à 1, donc il y a égalité entre les montants, mais dans une future case, on pourra saisir du port additionnel, avec des quantités supérieures à 1. Voilà le code HTML : 1 et la fonction maj_port() qui ne fonctionne pas : function maj_port() { var toto=document.boncde.val_port_1.value; alert('val_port_1='+toto); document.boncde.tot_port_1.value = toto; } Firebug me dit que document.boncde.tot_port_1 n'a pas de propriété... Comment faire? Merci d'avance

Anthed · Answer

boncd est le nom de ton formulaire ? Si oui, inclut-il ton élément tot_port_1 ?
Sinon, comme d'hab, vérification à tatons :
alert(document.boncde);

puis :
alert(document.boncde.tot_port_1);

avec tagName and co ...

orionis1 · Answer

Merci Anthed, 
en fait, j'avais trouvé, mais pas posté ma trouvaille :
pour récupérer la valeur, classique : 
document.boncde.val_port_1.value

et pour imposer une valeur à la cellule : document.getElementById('tot_port_1').innerHTML = [la_valeur];

Allez, je passe au problème suivant... ;o)

Encore merci

fouratinourhen · Answer

bonjour à tous, je suis debutante en javascript,j'ai le probléme suivant: j'ai cré une page html qui contienne un formulaire.Dans ce formulaire, il y a un champs de saisi (input)danslequel l'utilisateur indique le nombre des elements et aprés une clique sur le bouton , on ajoute des champs de texte (textarea) selon le nombre qui déjà indiqué. le probléme c'est lorsque on recupére les contenus de textarea (pour les inserer dans la table d'une base données)sont vides voila le code: ///le code en js: function add_field() { var bn =document.getElementById('nbre_elet').value; var d = document.getElementById('cible'); var p = document.createElement("p"); /* var br = document.createElement(" "); */ var i=1; for(i=1;i<=bn;i++) { d.appendChild(p); var textarea = document.createElement("textarea"); /*input.type = 'text';*/ textarea.name = "elet_["+i+"]"; textarea.id= "elet_["+i+"]"; //textarea.value='elet'+i; p.appendChild(textarea); } document.getElementById('cible').style.visibility = 'visible'; } ////le code se trouve dans le formulaire: Nombre d'elements : Les elements (SVP indiquer le chiffre ou le lettre avant l'element): /////le code de recuperation en php: echo 'Nombre de champs : '.$_POST['nbre_elet'].' '; for ($i=1; $i<=$_POST['nbre_elet']; $i++) { $dynamique = 'elet_['.$i.']'; $value = $_POST[$dynamique]; echo 'Valeur du champ '.$i.' : '.$value.' '; } et merci d'avance

Balayer un tableau en javascript

45 réponses

Votre réponse

Discussions similaires