Discussion :

[Invité]

Bonjour,

J'utilise editable-table (https://github.com/mindmup/editable-table), plus précisément une version éditée de ulongx (https://github.com/ulongx/editable-table)
Le tableau me va bien, seulement je cherche à modifier le code pour changer la façon de calculer et la manière d'afficher les résultats.

En effet, le script de base calcule (additionne) les sommes des cellules en colonne et affiche le résultat en ligne en bas, moi je souhaite qu'il multiplie 2 cellules d'une ligne et affiche le résultat à droite du tableau pour chaque ligne.

La façon dont le script fonctionne par défaut :

2	3	5	4	2
1	1	1	1	1
3	4	6	5	3

La façon dont je souhaite qu'il fonctionne (par exemple qu'il multiplie les chiffres de la colonne 3 par les chiffres de la colonne 4 et m'affiche le résultat à droite) :

2	3	5	4	20
1	1	1	1	1
3	4	6	5	30

C'est dans ce fichier là que tout ce passe, mais je me suis cassé la tête depuis ce matin et maintenant je ne suis même pas sur que je m'exprime correctement. Si c'est le cas, je vous prie de m'excuser

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
111
/* ulongx ->https://github.com/ulongx/editable-table
numeric-input-1.2.js
*/
(function () {
    "use strict";
 
    $.fn.numericInput = function (options) {
        var defaults = {
            columns: [], 
            totalColIndex: -1,
            type: '*'
        };
 
        options = $.extend(defaults, options);
 
        var element = $(this),
            footer = element.find('tfoot tr'),
            dataRows = element.find('tbody tr'),
            initialTotal = function () {
                var column,total,totalSum;
                if(!options.columns.length) {
                    for (column = 1; column < footer.children().size(); column++) {
                        total = 0;
                        dataRows.each(function () {
                            var row = $(this);
                            total += parseFloat(row.children().eq(column).text());
                        });
                        footer.children().eq(column).text(total);
                    }
                } else {
                    for (var x in options.columns) {
                        total = 0, totalSum = 0;
                        dataRows.each(function () {
                            var row = $(this);
                            total += parseFloat(row.children().eq(options.columns[x]).text());
                            if (options.totalColIndex !== -1){
                                totalSum += parseFloat(row.children().eq(options.totalColIndex).text());
                            }
                        });
                        footer.children().eq(options.columns[x]).text(total);
                        if (options.totalColIndex !== -1){
                            footer.children().eq(options.totalColIndex).text(totalSum);
                        }
                    }
                }
 
            };
 
        element.find('td').on('change', function (evt) {
            var cell = $(this),
                column = cell.index(),
                total = 0,
                totalSum = 0,
                totalSumEnd = 0;
            if (options.columns.length && $.inArray(column,options.columns) === -1) {
                //$.Message.info('LOL);
                                alert('MDR');
                return false;
            }
            if (options.columns.length && options.totalColIndex !== -1){
                var parentTr = cell.parent().children();
                options.columns.map(function (item, i) {
                    switch(options.type){
                        case '*':
                            if (totalSum === 0){
                                totalSum = parseFloat(parentTr.eq(item).text());
                            } else {
                                totalSum *= parseFloat(parentTr.eq(item).text());
                            }
                            break;
                        case '+':
                            totalSum += parseFloat(parentTr.eq(item).text());
                            break;
                        case '-':
                            totalSum -= parseFloat(parentTr.eq(item).text());
                            break;
                        default:
                            break;
                    }
 
                });
                parentTr.eq(options.totalColIndex).text(totalSum);
            }
 
            element.find('tbody tr').each(function () {
                var row = $(this);
                total += parseFloat(row.children().eq(column).text());
                if (options.totalColIndex !== -1) {
                    totalSumEnd += parseFloat(row.children().eq(options.totalColIndex).text());
                }
            });
            // footer.children().eq(column).text(total);
            if (options.totalColIndex !== -1) {
                footer.children().eq(options.totalColIndex).text(totalSumEnd);
            }else{
                footer.children().eq(column).text(total);
            }
 
        }).on('validate', function (evt, value) {
            var cell = $(this),
                column = cell.index();
            if (column === 0) {
                return !!value && value.trim().length > 0;
            } else {
                return !isNaN(parseFloat(value)) && isFinite(value);
            }
        });
        initialTotal();
        return this;
    };
})(window.jQuery);

En gros je cherche un tableau éditable et quand je rentre un chiffre dans la colonne 3 et un chiffre dans la colonne 4, il m'affiche le résultat dans la colonne 6.

J'ai essayé d'exploiter une autre piste, j'ai créé un tableau, aux cellules qui m'intéressent j'ai attribué des ID.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<td id="id1">2</td>
<td id="id2">5</td>
<td id="result"></td>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function calcul(){
    var id1, id2, result;
    id1 = Number(document.getElementById("id1").innerHTML);
    id2 = Number(document.getElementById("id2").innerHTML);
    result = id1 * id2;
    document.getElementById("result").innerHTML = result;
}
 
<button onclick="calcul()">click click</button>

mais ça marche qu'avec la première ligne. Pour le reste il faut jouer avec les ID, sachant que je compte rajouter un bouton pour l'insertion des lignes. Et il faudra aussi le faire interagir avec ce code (en partie) de ce editable-table, car à vrai dire un tableau qui s'actualise après les changements me va largement mieux qu'un tableau avec un bouton à cliquer

Donc, si quelqu'un a une idée comment en bidouillant 2-3 lignes dans numeric-input-1.2.js avoir le résultat que je cherche, je suis preneur

Bon weekend à toutes et à tous !