Tableaux, calculs et contenteditable

Résolu/Fermé

meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 2 août 2020 à 22:35
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 8 août 2020 à 13:14

Bonjour à toutes et à tous !

Me revoilà avec les tableaux ^^

J'ai laissé tomber le script tout fait et le jquery et j'ai décidé de me lancer tout seul, comme un grand, en partant de zéro. :D

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 :

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

code js :

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 :


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

ne 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." ? xD

Merci par avance et bonne soirée !

A voir également:

Contenteditable onchange
Html onchange - Forum HTML

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
3 août 2020 à 01:07

Bonjour,

document.getElementsByClassName

Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés

Tu dois donc boucler dessus

 var elements = document.getElementsByClassName('ref');
    for(var i =0;i<elements.length;i++){
      elements[i].contentEditable =true;
     }

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

Si....
Tu boucles sur tous les éléments de type TR ...
pour chaque TR, tu prends les élements des deux premières cellules pour faire ton calcul et tu le mets dans la troisième cellule..

un truc du genre :

var total = 0;
var table = document.getElementById('mytbl');
for (var r = 0, n = table.rows.length; r < n; r++) {
       var cel1 = parseFloat(table.rows[r].cells[0].innerHTML);
       var cel2 = parseFloat(table.rows[r].cells[1].innerHTML);
       table.rows[r].cells[2].innerHTML = cel1*cel2;
       total +=  cel1*cel2;
 }
alert(total);

Réponse 2 / 3

meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
3 août 2020 à 22:21

Merci beaucoup pour la réponse claire !
Je vais tester ça ce weekend (pas le temps avant, hélas) !

Bonne soirée !

Réponse 3 / 3

meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
Modifié le 8 août 2020 à 13:23

Bonjour,

Il n'y a pas moyen de sélectionner plusieurs en une seule ligne ?
J'essaie


 var elements = document.getElementsByClassName('ref','desc','q','pu'); /* ou 'ref desc q pu') */
    for(var i =0;i<elements.length;i++){
      elements[i].contentEditable =true;
     }

mais cela ne marche pas

MAais j'ai fait autrement sinon, j'ai mis "ref" à tous les td que je veux rendre éditable et c'est tout xD

Discussions similaires

Lien Dynamique avec SELECT (onChange) [PHP]

onChange="javascript:submit();

checkbox + onChange

onChange function

Appel de fonction JS evenement onchange

Discussions similaires

Newsletters