Calcul automatique dans un tableau dynamique

**samiker** · 27/12/2014, 22h48

Bonsoir tout le monde ,

j'ai un tableau en html remplit depuis ma base de donnée , il est composée de 4 colonnes et x ligne :

voici un exemple explicatif

id--controle1--controle2--somme

1 18 15 33

2 10 10 20

.

.

x 15 10 25

tout les champ sont éditables sauf la colonne somme ce que je veux c'est que la colonne somme calcule automatiquement la somme

mais je sais pas comment faire

prière de me donner une solution ou au moins une piste pour que je cherche parce que ça fais 2 jours que je cherche sans résultat

Merci d'avance

**ryan** · 27/12/2014, 23h31

Yop,

Voici une piste: Javascript gère les événements, et modifier la valeur d'un champ est un événement.

**micetf** · 27/12/2014, 23h37

Bonsoir,
Un tableau comme celui-ci ?

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
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    th, td {
        width:20%;
        text-align: center;
        border: 1px dotted black;
    }
    </style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Controle 1</th>
            <th>Controle 2</th>
            <th>Somme</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td contenteditable>18</td>
            <td contenteditable>15</td>
            <td>33</td>
        </tr>
        <tr>
            <td>2</td>
            <td contenteditable>10</td>
            <td contenteditable>10</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td contenteditable>10</td>
            <td contenteditable>15</td>
            <td>25</td>
        </tr>
    </tbody>
</table>
</body>
</html>

MiCetF

**micetf** · 27/12/2014, 23h41

Quelque chose comme ceci ?

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
 
(function (window) {
    "use strict";
    var document = window.document,
        trs = document.getElementsByTagName('tr'),
        tds,
        iTr,
        sommeAuto = function (td1, td2, tds) {
            td1.addEventListener("blur", function () {
                tds.innerText = parseInt(td1.innerText, 10) + parseInt(td2.innerText, 10);
            });
            td2.addEventListener("blur", function () {
                tds.innerText = parseInt(td1.innerText, 10) + parseInt(td2.innerText, 10);
            });
        };
 
    for (iTr = 1; iTr < trs.length; iTr += 1) {
        tds = trs[iTr].getElementsByTagName('td');
        sommeAuto(tds[1], tds[2], tds[3]);
    }
 
}(this));

MiCetF

**samiker** · 28/12/2014, 00h17

Merci pour la réponse MiCetF , oui c'est ce que je veux , pouvez vous me passer le code complet dans une page , je sais pas trop dans le js svp

Calcul automatique dans un tableau dynamique

JavaScript

Discussions similaires

Partager

Partager