Tableaux, calculs et contenteditable

Version imprimable

Bonjour à toutes et à tous !

Me revoilà avec les tableaux.:mouarf:

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.:calim2:

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:

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:

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:

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." ? :mrgreen:

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

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 !

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

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

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
<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:

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)
	})
})

03/08/2020, 17h33
NoSmoking
Bonjour,

Citation:

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:

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);
Citation:

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>
03/08/2020, 22h17
Invité
Citation:

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" =)
Citation:
Envoyé par NoSmoking

Bonjour,

juste un indice sans plus

Code:

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 !

Bonjour bonjour :)

Me revoilà avec un code comme ça :
Code:

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:

<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:

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 !

Hello,

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

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
 
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:

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 !

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

Code:

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)
	})
}

10/08/2020, 18h27
NoSmoking

Citation:

Envoyé par ZiKOCj

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

euh !!! pas tant que cela

Citation:

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.

Citation:

Envoyé par NoSmoking

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

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

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:

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

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

13/08/2020, 22h13
javatwister

:roll:
13/08/2020, 22h49
Invité

Citation:

Envoyé par javatwister

:roll:

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
13/08/2020, 23h19
javatwister

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;
14/08/2020, 20h26
Invité

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.