Tableaux, calculs et contenteditable

Invité · 02/08/2020, 19h08

Bonjour à toutes et à tous !

Me revoilà avec les tableaux.

J'ai laissé tomber le script tout fait et le jquery (https://www.developpez.net/forums/d2...r-mode-calcul/) et j'ai décidé de me lancer tout seul, comme un grand, en partant de zéro.

Le but c'est de créer un tableau avec les produits, leur quantité et calculer le sous-total dans chaque ligne et un total final.

J'ai mon tableau html :

Code HTML :

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
<table id="mytbl">
<thead>
    <tr>
        <th>Référénce</th>
        <th>Désignation</th>
        <th>Quantité</th>
        <th>Prix Unitaire</th>
        <th>TOTAL</th>
    </tr>
</thead>
 
<tfoot></tfoot>
 
<tbody>
    <tr>
        <td id="ref">TEST1</td>
        <td id="desc">Produit bla bla</td>
        <td id="q">2</td>
        <td id="pu">5</td>
        <td id="total"></td>
    </tr>
 
</tbody>
</table>
 
<button onclick="calcul()">Calculer</button>

mon code js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function etbl() {
    document.getElementById("ref").contentEditable = true;
    document.getElementById("desc").contentEditable = true;
    document.getElementById("q").contentEditable = true;
    document.getElementById("pu").contentEditable = true;
}
 
function calcul() {
    var nb1, nb2 = Number;
    nb1 = document.getElementById("q").innerText;
    nb2 = document.getElementById("pu").innerText;
    total = nb1*nb2;
    document.getElementById("total").innerText = total;

pour rendre les cellules éditables, j'appelle la function etbl dans <body onload

Tout ce bazar fonctionne. Ça multiplie <td id="q">2</td> par <td id="pu">5</td> et affiche dans <td id="total"></td>. Super!

Maintenant un autre problème qui se pose :
Si j'ajoute une autre ligne avec les mêmes ID, rien ne se passera avec cette ligne. Les "cellules" ne seront ni modifiables, ni calculables, étant donné que l'ID est unique.

J'ai essayé de remplacer les ID par la classe, histoire de rendre éditables que les éléments d'une certaine classe, mais

Code :

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

document.getElementsByClassName("ref").contentEditable = true;

fonctionne pas.

N'y a-t-il pas un moyen "simple" de lui dire : "tu vas chercher le nombre de la colonne A, tu vas le multiplier par le nombre de la colonne B et tu vas afficher le résultat dans la colonne C. Puis tu me fais la même chose avec toutes les lignes et à la fin, tu prends tous les nombres de la colonne C et tu me les additionnes en affichant le résultat tout en bas dans la colonne C." ?

Ou peut-être il y a un moyen de lui designer les endroits où chercher les nombres, genre :

Code HTML :

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

1
2
3
<th id="a">Quantité</th>
<th id="b">Prix Unitaire</th>
<th id="c">TOTAL</th>

et faire une sorte de boucle "pour chaque C = chaque A * chaque B"

Au secours les amis !

Merci par avance et bonne fin de weekend !

**javatwister** · 03/08/2020, 09h59

Tu tiens vraiment à ce que le tableau soit éditable?

A part ça, voilà un principe: http://javatwist.imingo.net/tabedit.htm

Code html :

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
<table contenteditable="true">
<thead>
    <tr>
        <th>Référence</th>
        <th>Désignation</th>
        <th>Quantité</th>
        <th>Prix Unitaire</th>
        <th>TOTAL</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>TEST 1</td>
        <td>Produit truc</td>
        <td>2</td>
        <td>5</td>
        <td contenteditable="false"></td>
        <td><button>calculer</button></td>
    </tr>
    <tr>
        <td>TEST 2</td>
        <td>Produit machin</td>
        <td>25</td>
        <td>3</td>
        <td contenteditable="false"></td>
        <td><button>calculer</button></td>
    </tr>
    <tr>
        <td>TEST 3</td>
        <td>Produit bidule</td>
        <td>18.4</td>
        <td>30</td>
        <td contenteditable="false"></td>
        <td><button>calculer</button></td>
    </tr>
</tbody>
</table>

Code javascript :

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

1
2
3
4
5
6
7
8
const b=document.querySelectorAll("td > button");
b.forEach(v=>{
	v.addEventListener("click",()=>{
		const t=v.parentNode.parentNode;
		const tot=parseFloat(t.cells[2].textContent)*parseFloat(t.cells[3].textContent);
		t.cells[4].textContent=tot.toFixed(2)
	})
})

**NoSmoking** · 03/08/2020, 17h33

Bonjour,

N'y a-t-il pas un moyen "simple" de lui dire : "tu vas chercher le nombre de la colonne A,

juste un indice sans plus

Code :

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

1
2
3
4
// sélecteur pour les 3éme TD du TBODY
const selecteur = "tbody td:nth-child(3)";
// récup. les éléments
const oTDs = document.querySelectorAll(selecteur);

Si j'ajoute une autre ligne avec les mêmes ID, ...

Rappel : Une ID doit être unique.

Ajout dynamique ou non, si oui peut-être regarder du côté de la délégation des événements sur la <table>

Invité · 03/08/2020, 22h17

Envoyé par javatwister

Tu tiens vraiment à ce que le tableau soit éditable?

A part ça, voilà un principe: http://javatwist.imingo.net/tabedit.htm

Bonjour,

Oui, et non seulement éditable, mais je compte aussi pouvoir ajouter des lignes "à la volée" =)

Envoyé par NoSmoking

Bonjour,

juste un indice sans plus

Code :

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

1
2
3
4
// sélecteur pour les 3éme TD du TBODY
const selecteur = "tbody td:nth-child(3)";
// récup. les éléments
const oTDs = document.querySelectorAll(selecteur);

Effectivement, c'est aussi une piste !

Merci à vous deux ! Je me pencheras dessus, sûrement le weekend, car manque de temps durant la semaine, hélas !

Bonne soirée et à bientôt !

Invité · 08/08/2020, 16h57

Bonjour bonjour

Me revoilà avec un code comme ça :

Code js :

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
function caclul(){
    var table = document.getElementById('mainTable');
    var total = 0;
     for (var r = 1, n = table.rows.length; r < n; r++) {
            var cel1 = parseFloat(table.rows[r].cells[2].innerHTML);
            var cel2 = parseFloat(table.rows[r].cells[4].innerHTML);
            table.rows[r].cells[5].innerHTML = cel1*cel2;
            total +=  cel1*cel2;
     }
   }
 
function etbl() {
 
var elements = document.getElementsByClassName('ed');
for(var i = 0;i<elements.length;i++){
  elements[i].contentEditable = true;
 }
 
 caclul();
 
}

j'appelle la function de calcul dans le

Code html :

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

<body onload="etbl();">

Ça marche bien ! Tous les td à rendre éditables ont une classname "ed".

Maintenant je cherche à faire en sorte que le calcul soit fait non en cliquant sur le bouton, mais suite au changement du texte dans le tableau.

Je tourne autour de :

Code JavaScript :

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

1
2
3
4
<script type="text/javascript">document.getElementById('mainTable').getElementsByClassName('ed').onchange = function(){
    calcul();
}
</script>

Mais ça ne veut pas marcher. Comment on peut faire svp?

Merci par avance les amis !

Invité · 09/08/2020, 01h15

Hello,

Je viens de résoudre mes soucis en revenant à... jQuery

Code js+jquery :

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
 
function lecalcul() {
    var table = document.getElementById('mainTable');
    var total = 0;
     for (var r = 1, n = table.rows.length; r < n; r++) {
            var cel1 = parseFloat(table.rows[r].cells[2].innerText);
            var cel2 = parseFloat(table.rows[r].cells[4].innerText);
            table.rows[r].cells[5].innerText = cel1*cel2;
            total += cel1*cel2;    
     }
}
 
function etbl() {
 
 lecalcul();
 
 $('td').on('dblclick', function () {
    var $this = $(this);
    var $input = $('<input>', {
        value: $this.text(),
        type: 'text',
        blur: function () {
            $this.text(this.value);
        },
        keyup: function (e) {
            if (e.which === 13)
                $input.blur();
        }
    }).appendTo($this.empty()).focus();
});
}

et un bout de script dans la partie html :

Code js :

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

1
2
3
4
5
6
7
 
<script>
etbl();
$(document).on('click keyup', function () {
    lecalcul();
});
</script>

au lancement il calcule ce qui est déjà inscrit dans les "cellules".
Pour éditer suffit de double-cliquer sur les cellules à modifier, il me les transforme en champs input.
Et pour qu'il prend en compte les novelles valeurs saisies je relance la function de calcul sur un clique partout dans le doc. ou levé de touche (si je valide le input par touche entrée du clavier par exemple)

Merci et à la prochaine !

**javatwister** · 09/08/2020, 10h36

alors un poil plus simple en modifiant mon exemple précédent: http://javatwist.imingo.net/tabedit.htm

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener("DOMContentLoaded",()=>{
	cal()
})
document.getElementById("tab").addEventListener("input",()=>{
	cal()
})
 
function cal(){
const b=document.querySelectorAll("#tab td:nth-child(5)");
b.forEach(v=>{
		const t=v.parentNode;
		const tot=parseFloat(t.cells[2].textContent)*parseFloat(t.cells[3].textContent);
		v.textContent=tot.toFixed(2)
	})
}

**NoSmoking** · 10/08/2020, 18h27

Envoyé par ZiKOCj

Je viens de résoudre mes soucis en revenant à... jQuery

euh !!! pas tant que cela

var table = document.getElementById('mainTable');

en fait juste pour l'ajout d'élément et d'écouteur donc pas top.

Le travail sur base d'éléments éditables fait qu'il faut gérer les caractères saisis et notamment la touche enter, c'est un minimum si l'on ne veut pas que la mise en page parte en live.

Invité · 13/08/2020, 21h39

Envoyé par NoSmoking

euh !!! pas tant que cela
et notamment la touche enter

D'ailleurs parlant de touches, j'ai fait ceci :

Code jquery :

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
 
function monedit(){
    $('td').on('dblclick keyup', function () {
        var $this = $(this);
        var $input = $('<input>', {
            value: $this.text(),
            type: 'text',
            blur: function () {
                $this.text(this.value);
            },
             keyup: function (e) {
                if (e.which === 9)
                    $input.blur();
            }
        }).appendTo($this.empty()).focus();
    });
}

ça marche avec la touche TAB du clavier, super !
Mais je veux qu'il "zappe" un TD précis. A ce TD j'attribue une classe "ni" (td class="ni")
et

Code jquery :

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

$('td.ni').prop('tabindex', -1);

Il ajoute bien "tabindex: -1" mais il le zappe pas.
Comment remédier svp ?

**javatwister** · 13/08/2020, 22h13

Invité · 13/08/2020, 22h49

Envoyé par javatwister

Euh... je reformule ma question :
Comment faire en sorte qu'il transforme pas le td avec la classe "ni" en input.
Parce que là, en appuyant sur tab il parcourt tous les td en les transformant en inputs. Tout comme lors du double click

**javatwister** · 13/08/2020, 23h19

Si tu as regardé ce que je proposais, l'idée était de rendre éditable toute la table sauf les titres et une colonne donnée; tout cela sans frais de scripts superflus, juste en html;

Invité · 14/08/2020, 20h26

J'ai regardé et je te remercie, mais dans le tien, en appuyant la touche entrée ça crée un saut de ligne/retour à la ligne, ce qui m'arrange pas.

Tableaux, calculs et contenteditable

JavaScript

Discussions similaires

Partager

Partager