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

HTML Discussion :

Problème de somme de colonnes et de lignes d'un tableau [HTML 5]


Sujet :

HTML

  1. #1
    Membre éprouvé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    998
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 998
    Par défaut Problème de somme de colonnes et de lignes d'un tableau
    Bonjour à Tous,

    Avant tout, je vous souhaite une bonne année.
    Dans le code joint, j'arrive à effectuer la somme mais "DE TOUTES LES CELLULES" alors que je souhaite calculer à la fois les lignes et chacune des colonnes.
    Je suis débutant en JS et commence juste à comprendre.

    Auriez vous des pistes afin de me guider vers la solution.
    Bien à vous

    Code : 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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SIMAG-Gestion des articles</title>
        <link rel="stylesheet" href="css/components.css">
        <link rel="stylesheet" href="css/icons.css">
        <link rel="stylesheet" href="css/responsee.css">
        <link rel="stylesheet" href="css/template-style.css">
        <link rel="stylesheet" href="css/pages.css">
        <link rel="stylesheet" href="css/general.css">
        <link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
     
        <!-- <script src="../js/clicDroit.js"></script> -->
        <script src="../js/script.js" defer></script>
        <title>Budget</title>
    </head>
    <body>
    <?php include '../pages/connexion/navBudget.php' ?>    
    <div class="tableau1">
        <input class="recherche" placeholder="Recherche par code article" id="maRecherche" onkeyup="filtrer()"><br><br>
        <table id="tableau" class="table table-striped table-hover">
          <form>  
            <thead>
                <tr>
                    <th>#ID</th>
                    <th>Libelle</th>
                    <th>Abréviation</th>
                    <th>Type</th>
                    <th>Janvier</th>
                    <th>Février</th>
                    <th>Mars</th>
                    <th>Avril</th>
                    <th>Mai</th>
                    <th>Juin</th>
                    <th>Juillet</th>
                    <th>Août</th>
                    <th>Septembre</th>
                    <th>Octobre</th>
                    <th>Novembre</th>
                    <th>Décembre</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tfoot>
            <tr>
              <td colspan="4">SUM</td>
              <td><span id="total" class="inp1" ></span></td>
            </tr>
          </tfoot>
            <tbody>
            <?php
            require_once '../pages/connexion/database.php';
            $categories = $pdo->query("SELECT RUB_ID,RUB_LIBELLE,RUB_ABREV,RUB_NATURE,RUB_TYPE FROM RUBRIQUES ")->fetchAll(PDO::FETCH_OBJ);
            foreach ($categories as $produit){
                ?>
                <tr>
                    <td><?= $produit->RUB_ID ?></td>
                    <td><?= $produit->RUB_LIBELLE ?></td>
                    <td><?= $produit->RUB_ABREV ?></td>
                    <td><?= $produit->RUB_NATURE ?></td>
                    <td><input type="text" class="input_small_fee" name="fee1"></td>
                    <td><input type="text" class="input_small_fee" name="fee2"></td>
                    <td><input type="text" class="input_small_fee" name="fee3"></td>
                    <td><input type="text" class="input_small_fee" name="fee4"></td>
                    <td><input type="text" class="input_small_fee" name="fee5"></td>
                    <td><input type="text" class="input_small_fee" name="fee6"></td>
                    <td><input type="text" class="input_small_fee" name="fee7"></td>
                    <td><input type="text" class="input_small_fee" name="fee8"></td>
                    <td><input type="text" class="input_small_fee" name="fee9"></td>
                    <td><input type="text" class="input_small_fee" name="fee10"></td>
                    <td><input type="text" class="input_small_fee" name="fee11"></td>
                    <td><input type="text" class="input_small_fee" name="fee12"></td>
                    <td><input type="text" class="input_small_fee" name="fee13"></td>
                </tr>
                <?php
            }
            ?>
            </tbody>
        </form>  
        </table>
    </div>
    <script type="text/javascript">
         function addition() {
              result = 0;
              for (j=0; j<array.length; j++) {
                   if ( array[j].value.length > 0 ) {
                   if ( !/^\d+(\.\d{1,2})?$/.test(array[j].value) )
                        array[j].style.backgroundColor = "whitesmoke" ;
                   else {
                        array[j].style.backgroundColor = "white";
                        result = parseFloat(result) + parseFloat(array[j].value);
                        }
                   }                   
                   }
              total.innerHTML = result.toString();
              }
         array = document.getElementsByClassName('input_small_fee') ;
         for (j=0; j<array.length; j++) { array[j].addEventListener("blur", addition) }
         document.forms[0].elements['fee1'].focus();
         
    </script>
    <Script src="../simag/js/produitRecherche.js"></Script>
     
    </body>
    </html>
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


  2. #2
    Membre éprouvé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    998
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 998
    Par défaut Problème de calucl dans un tableau
    Bonjour,

    J'ai changé de post car je n'avais pas assez travailler sur le sujet, dans le code ci-dessous, j'arrive à calculer le total lignes par ligne, le soucis est que je ne sais pas transformer mon code dans le cas ou mon tableau possède un nombre de ligne inconnu car généré par une requête PHP

    Code : 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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <!doctype html>
    <html>
     
    <head>
        <script>
    /**
     * Initialise le champ d’id sommei avec la somme des champs de la même ligne
     * @param ligne numéro de la ligne
     */
    function somme(ligne) {
            "use strict";
            var sommeRes = 0, colonne, NB_COLONNES = 2;
            
            // On va calculer la somme de la ligne dans sommeRes
            for (colonne = 1; colonne <= NB_COLONNES; colonne += 1) {
                    sommeRes += parseFloat(document.getElementById("ligne" + ligne + "_colonne" + colonne).value);
            }
     
            // Si la sommeRes n’est pas définie on ne l’affiche pas.
            if (isNaN(sommeRes)) {
                    sommeRes = "";
            }
            document.getElementById("somme" + ligne).value = sommeRes;
    }
     
    window.onload = function () {
            "use strict";
     
            // Ici on est sur que toute la page est chargée. On peut travailler tranquille.
     
            // Ne pas faire de boucles pour définir les onchange. (On pourrait les définir dans le code html mais il vaut mieux séparer le javascript du contenu.
            document.getElementById("ligne1_colonne1").onchange = function () {somme(1);};
            document.getElementById("ligne1_colonne2").onchange = function () {somme(1);};
            document.getElementById("ligne2_colonne1").onchange = function () {somme(2);};
            document.getElementById("ligne2_colonne2").onchange = function () {somme(2);};
        document.getElementById("ligne3_colonne1").onchange = function () {somme(3);};
            document.getElementById("ligne3_colonne2").onchange = function () {somme(3);};
    };
     
        </script>
    </head>
     
    <body>
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<meta charset="UTF-8">
    	<title>somme</title>
    </head>
    <body>
    	<th>Ligne 1</th><input type="text" id="ligne1_colonne1"/><input type="text" id="ligne1_colonne2"/><input type="text" id="somme1"/><br/>
    	<th>Ligne 2</th><input type="text" id="ligne2_colonne1"/><input type="text" id="ligne2_colonne2"/><input type="text" id="somme2"/><br/>
        <th>Ligne 3</th><input type="text" id="ligne3_colonne1"/><input type="text" id="ligne3_colonne2"/><input type="text" id="somme3"/><br/>
    	<script type="text/javascript" src="somme.js"></script>
    </body>
    </html>
    Dans ma page réelle, j'ai des catégories et les 12 mois de l'année, mais je ne connais pas à l'avance le nombre de lignes de catégorie qui vont s'afficher car il suffit que l'opérateur ajoute une catégorie pour que cela change le nombre de ligne.
    Avez vous une idée pour que mon code s'adapte à mon besoin
    Merci à Toutes et Tous
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


  3. #3
    Membre éprouvé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    998
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 998
    Par défaut
    J'ai fini par trouver la solution et écris le code JS qui me fallait, je clôture le sujet
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


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

Discussions similaires

  1. Réponses: 2
    Dernier message: 30/07/2019, 11h02
  2. Réponses: 1
    Dernier message: 18/10/2013, 17h12
  3. Réponses: 2
    Dernier message: 22/03/2012, 15h18
  4. Réponses: 1
    Dernier message: 28/09/2010, 18h36
  5. Réponses: 1
    Dernier message: 06/10/2007, 15h59

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