Somme total d'une ligne et d'une colonne

Nicolas Groelly
Javascript

Bonjour,

Je suis en alternance dans une entreprise et je dois faire un outil web. Cet outil doit permetre de pointer des heures par semaine et par projet, j'ai donc un tableau avec des colonnes semaines et des lignes projets.
Voila une capture d'écran de la page affichée.

https://img42.com/Yetd9+
Voila le code HTML de mon tableau :

<table id="projects">
<thead>
    <tr>
        <th style="width:400px;">Projet</th>
        <th>Code</th>
        <th>Activité</th>
        <th>Activité</th>
        <th>Code</th>
        <th>Nombre d'heures allouées</th>
        <th>Nombre d'heures consomées</th>
        <th style="width:30px;">25</th>
        <th style="width:30px;">26</th>
        <th style="width:30px;">27</th>
        <th style="width:30px;">28</th>
        <th style="width:30px;">29</th>
        <th style="width:30px;">30</th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th style="width:30px;">#Ici heures consommées sur la semaine</th>
        <th style="width:30px;">#Ici heures consommées sur la semaine</th>
        <th style="width:30px;">#Ici heures consommées sur la semaine</th>
        <th style="width:30px;">#Ici heures consommées sur la semaine</th>
        <th style="width:30px;">#Ici heures consommées sur la semaine</th>
        <th style="width:30px;">#Ici heures consommées sur la semaine</th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th style="width:30px;">37</th>
        <th style="width:30px;">37</th>
        <th style="width:30px;">37</th>
        <th style="width:30px;">32</th>
        <th style="width:30px;">37</th>
        <th style="width:30px;">37</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td>Activité syndicales (y compris congés AY)</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Au réel</td>
        <td>#Ici heures consommées pour le projet</td>

        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-25-1" onChange="JavaScript:autosave('2017-25-1');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-26-1" onChange="JavaScript:autosave('2017-26-1');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-27-1" onChange="JavaScript:autosave('2017-27-1');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-28-1" onChange="JavaScript:autosave('2017-28-1');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-29-1" onChange="JavaScript:autosave('2017-29-1');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-30-1" onChange="JavaScript:autosave('2017-30-1');" /></td>
    </tr>
    <tr>
        <td>Animation métier études</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Au réel</td>
        <td>#Ici heures consommées pour le projet</td>

        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-25-4" onChange="JavaScript:autosave('2017-25-4');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-26-4" onChange="JavaScript:autosave('2017-26-4');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-27-4" onChange="JavaScript:autosave('2017-27-4');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-28-4" onChange="JavaScript:autosave('2017-28-4');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-29-4" onChange="JavaScript:autosave('2017-29-4');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-30-4" onChange="JavaScript:autosave('2017-30-4');" /></td>
    </tr>
    <tr>
        <td>Assistance et déploiement d'applis informatiques</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Au réel</td>
        <td>#Ici heures consommées pour le projet</td>

        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-25-7" onChange="JavaScript:autosave('2017-25-7');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-26-7" onChange="JavaScript:autosave('2017-26-7');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-27-7" onChange="JavaScript:autosave('2017-27-7');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-28-7" onChange="JavaScript:autosave('2017-28-7');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-29-7" onChange="JavaScript:autosave('2017-29-7');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-30-7" onChange="JavaScript:autosave('2017-30-7');" /></td>
    </tr>
    <tr>
        <td>Autres absences</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Au réel</td>
        <td>#Ici heures consommées pour le projet</td>

        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-25-8" onChange="JavaScript:autosave('2017-25-8');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-26-8" onChange="JavaScript:autosave('2017-26-8');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-27-8" onChange="JavaScript:autosave('2017-27-8');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-28-8" onChange="JavaScript:autosave('2017-28-8');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-29-8" onChange="JavaScript:autosave('2017-29-8');" /></td>
        <td style="width:80px;"><input style="width:50px;" type="number" value="0" min="0" name="test" id="2017-30-8" onChange="JavaScript:autosave('2017-30-8');" /></td>
    </tr>
</tbody>
</table>

Ce que je veux

Ce que j'aimerai faire c'est dès qu'il y a une modification dans les champs de formulaire, changer le nombre d'heure pointé, à pointé, consommé. Les ID des champs du formulaire suive une logique : année-numéro de semaine-id du projet.

Merci de votre aide.

5 réponses

Guique

Bonjour,

Qu'as-tu essayer de faire pour le moment ?
Tu as un morceau de code à nous montrer ?

Nicolas Groelly
Auteur

J'avais pensé utiliser quelque chose comme ça

HTML :

<table>
    <tr>
        <td contenteditable="true" id="lig_0_col_0">&nbsp;</td>
        <td contenteditable="true" id="lig_0_col_1">&nbsp;</td>
        <td contenteditable="true" id="lig_0_col_2">&nbsp;</td>
    </tr>

    <tr>
        <td contenteditable="true" id="lig_1_col_0">&nbsp;</td>
        <td contenteditable="true" id="lig_1_col_1">&nbsp;</td>
        <td contenteditable="true" id="lig_1_col_2">&nbsp;</td>
    </tr>

    <tr>
        <td id="somme_0" >&nbsp;</td>
        <td id="somme_1" >&nbsp;</td>
        <td id="somme_2" >&nbsp;</td>
    </tr>
</table>

JS :

$("td").on("keyup", function(){
    var num_col = $(this).index();
    var somme = 0;
    $('[id*="_col_'+num_col+'"]').each(function(){    
        var val = $(this).text();
        if($.isNumeric(val)){
            somme += parseInt(val);
        }
    });
    $("#somme_"+num_col).text(somme);
});

En l'état cela fonctionne, mais je n'ai pas réussi à l'adapter à mon tableau

Guique

C'est le fait de les relier aux ID de tes projets qui te pose problème ?

Nicolas Groelly
Auteur

Oui comme j'ai une partie qui définit la colonne et une autre la ligne

Guique

D'accord. Et bien tu peux créer un paramètre "data-projet" qui contiendrait l'ID de ton projet, sur les éléments de ce projet et par exemple, un paramètre "data-counter" avec le nom du counter en question.
Ca te permettra de récupérer le counter "heure-pointe" du projet d'ID "2017-25-8" et de le mettre à jour lorsqu'un élément est mis à jour.
Je ne sais pas si c'est très clair, je suis un peu fatigué.