Forum : Comment faire la somme des lignes d'un tableau

Bonjour,
je suis confronté à un problème qui me chiffonne un peu.
En effet j'ai un tableau html qui représente une facture(produit, quantité, prix unitaire, montant)

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <style>
            td, th {
                border: 2px solid gray;
            }
            table{
                border-collapse: collapse;
            }

            .total, .textid {
                text-align: center;
            }

            .textid {
                border: none;
            }
        </style>
    </head>

    <body>
        <table>
            <thead>
                <tr>
                    <th>PRODUITS</th>
                    <th>QUANTITE</th>
                    <th>PRIX UNITAIRE</th>
                    <th>MONTANT</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Paracétamol</td>
                    <td><input type="text" class="textid" name="f01" onkeyup="checkValueEntered(this)"></td>
                    <td><input type="text" class="textid" name="f02" onkeyup="checkValueEntered(this)"></td>
                    <td><input type="text" class="textid" name="f03" readonly></td>
                </tr>
                <tr>
                    <td>Aspirine</td>
                    <td><input type="text" class="textid" name="f01" onkeyup="checkValueEntered(this)"></td>
                    <td><input type="text" class="textid" name="f02" onkeyup="checkValueEntered(this)"></td>
                    <td><input type="text" class="textid" name="f03" readonly></td>
                </tr>
                <tr>
                    <td>Fervex</td>
                    <td><input type="text" class="textid" name="f01" onkeyup="checkValueEntered(this)"></td>
                    <td><input type="text" class="textid" name="f02" onkeyup="checkValueEntered(this)"></td>
                    <td><input type="text" class="textid" name="f03" readonly></td>
                </tr>
                <tr class="total">
                    <td colspan="3">TOTAL</td>
                    <td><input type="text" name="f04" readonly></td>
                </tr>
            </tbody>
        </table>

        <script>
            //check if the value entered is a number and Integer if not display a warning
            function checkValueEntered(component) {
                if (component.value !== "" && isNaN(Number(component.value.replace(/,/g, "")))) {
                    alert("Veuillez ne saisir que des chiffres s'il vous plait");
                    component.value = "";
                } else if (!Number.isInteger(Number(component.value.replace(/,/g, "")))) {
                    alert("Veuillez ne saisir que des chiffres s'il vous plait");
                    component.value = "";
                }
            }

            //
            $("input[name='f02']").keyup(function() {
                var row_params = {},
                    row = $(this).closest("tr"),
                    montant;

                row_params.quantite = $(row).find("input.textid[name='f01']").val().replace(/,/g, ".");
                row_params.pu = $(row).find("input.textid[name='f02']").val().replace(/,/g, ".");

                montant = row_params.quantite * row_params.pu;

                $(row).find("input.textid[name='f03']").val(montant);

            })
        </script>
    </body>
</html>

Je calcule de façon dynamique le montant de chaque produit après avoir renseigné la quantité et le prix unitaire.
Mais je souhaite également faire la somme de tous les montants obtenus sur chaque ligne et l'afficher dans un champ TOTAL sur ma dernière ligne, mais j'ai du mal à trouver une solution; je sollicite donc votre aide pour une piste, voire un code déjà existant.

Merci pour votre compréhension

Comment faire la somme des lignes d'un tableau

2 réponses