Calcul automatique dans un tableau dynamique

Version imprimable

27/12/2014, 22h48
samiker

Calcul automatique dans un tableau dynamique

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
27/12/2014, 23h31
ryan

Yop,

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

Bonsoir,
Un tableau comme celui-ci ?

Code:

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

Quelque chose comme ceci ?

Code:

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

28/12/2014, 00h17
samiker

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