IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Tableaux, calculs et contenteditable


Sujet :

JavaScript

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut Tableaux, calculs et contenteditable
    Bonjour à toutes et à tous !

    Me revoilà avec les tableaux.

    J'ai laissé tomber le script tout fait et le jquery (https://www.developpez.net/forums/d2...r-mode-calcul/) et j'ai décidé de me lancer tout seul, comme un grand, en partant de zéro.

    Le but c'est de créer un tableau avec les produits, leur quantité et calculer le sous-total dans chaque ligne et un total final.

    J'ai mon tableau html :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <table id="mytbl">
    <thead>
        <tr>
            <th>Référénce</th>
            <th>Désignation</th>
            <th>Quantité</th>
            <th>Prix Unitaire</th>
            <th>TOTAL</th>
        </tr>
    </thead>
     
    <tfoot></tfoot>
     
    <tbody>
        <tr>
            <td id="ref">TEST1</td>
            <td id="desc">Produit bla bla</td>
            <td id="q">2</td>
            <td id="pu">5</td>
            <td id="total"></td>
        </tr>
     
    </tbody>
    </table>
     
    <button onclick="calcul()">Calculer</button>

    mon code js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function etbl() {
        document.getElementById("ref").contentEditable = true;
        document.getElementById("desc").contentEditable = true;
        document.getElementById("q").contentEditable = true;
        document.getElementById("pu").contentEditable = true;
    }
     
    function calcul() {
        var nb1, nb2 = Number;
        nb1 = document.getElementById("q").innerText;
        nb2 = document.getElementById("pu").innerText;
        total = nb1*nb2;
        document.getElementById("total").innerText = total;
    pour rendre les cellules éditables, j'appelle la function etbl dans <body onload

    Tout ce bazar fonctionne. Ça multiplie <td id="q">2</td> par <td id="pu">5</td> et affiche dans <td id="total"></td>. Super!

    Maintenant un autre problème qui se pose :
    Si j'ajoute une autre ligne avec les mêmes ID, rien ne se passera avec cette ligne. Les "cellules" ne seront ni modifiables, ni calculables, étant donné que l'ID est unique.

    J'ai essayé de remplacer les ID par la classe, histoire de rendre éditables que les éléments d'une certaine classe, mais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementsByClassName("ref").contentEditable = true;
    fonctionne pas.

    N'y a-t-il pas un moyen "simple" de lui dire : "tu vas chercher le nombre de la colonne A, tu vas le multiplier par le nombre de la colonne B et tu vas afficher le résultat dans la colonne C. Puis tu me fais la même chose avec toutes les lignes et à la fin, tu prends tous les nombres de la colonne C et tu me les additionnes en affichant le résultat tout en bas dans la colonne C." ?

    Ou peut-être il y a un moyen de lui designer les endroits où chercher les nombres, genre :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <th id="a">Quantité</th>
    <th id="b">Prix Unitaire</th>
    <th id="c">TOTAL</th>
    et faire une sorte de boucle "pour chaque C = chaque A * chaque B"

    Au secours les amis !

    Merci par avance et bonne fin de weekend !
    Dernière modification par Invité ; 02/08/2020 à 19h37. Motif: Coloration syntaxique [CODE=HTML] … [/CODE] + balises C

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Tableaux] Calculer la somme d'un tableau
    Par Skippy1 dans le forum Langage
    Réponses: 14
    Dernier message: 11/01/2007, 18h12
  2. [Tableaux] calculer les nombres
    Par ciel65 dans le forum Langage
    Réponses: 2
    Dernier message: 23/11/2006, 14h45
  3. [Tableaux] Calcul de somme
    Par Flushovsky dans le forum Langage
    Réponses: 2
    Dernier message: 21/09/2006, 16h45
  4. [Tableaux] Calcul de champ ?
    Par Sparkle dans le forum Langage
    Réponses: 3
    Dernier message: 17/08/2006, 22h13
  5. [Tableaux] Calcul d'itinéraire / route / étapes
    Par gb-ch dans le forum Langage
    Réponses: 9
    Dernier message: 08/08/2006, 08h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo