calcul jQuery does not work

Question

I try to change value by default with a calcul : value by default * quantity / 100. In my script something does not work because nothing happened, I can't find what! (jQuery is very new for me...)

$(function () {
    $("#calcul").click(function (e) {
      e.preventDefault();
      var valeur = parseFloat($("#valquantite").text() );

      $("#nutrition > tbody > tr").each(function () {
        var valeurOrigin = parseFloat($(this).find("td").eq(1).text().replace(",", "."));
        var newValeur;
        if ($.isNumeric(valeurOrigin) === true) {
          newValeur = valeurOrigin*valeur/100;
          newValeur = Math.ceil(newValeur*1000)/1000;
        } else {
          newValeur = $(this).find("td").eq(1).text();
        }

        $(this).find("td").eq(2).html(newValeur);
      });
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow-x:scroll;;" name="formu">
<table class="table table-striped" id="nutrition" >
  <thead>
    <tr>
      <th>Aliments</th>
      <th id="qty">Poids</th>
      <th class="generaux">Energie kJ</th>
      <th class="generaux">Energie kcal</th>
    </thead>
      <tbody class="text-primary" id="">
      <tr><td>Pain au lait, préemballé:</td><td id="valquantite"><strong>35gr</strong></td>
        <td class="generaux" name="">1510</td>
        <td class="generaux">358</td>  
      </tr>
      <tr><td>Total</td>
        <td><strong>50gr</strong></td>
      </tr>
      </tbody>
    </table>
    <input class="btn btn-primary" type="button" value="Calculer" id="calcul" />

What i try to do is that the first column after the name retrieves the quantities from a table (different for each row), then I retrieve the values ​​by default columns energie_kj, energie_kcal, proteines, etc .. from a table (there are 60 Columns !! they are already calculated by default, I do not need to do any conversion). Some cells contain text (example: nc, traces, <) that I want to display as text. Then I have to calculate the total of each column (ignoring cells that contain text). That's my problem! I posted another question for the same problem with a code in js that works almost but not completely ... here: Javascript problems with NaN Thanks in advance for your answers.

Answer 1

Hope this will help you. Replace your code with following : I've just parse your valeur variable and replaced > sign when calling .each function and applied Id=nutrition to table rather than tbody tag.

  $(function () {
    $("#calcul").click(function (e) {
      e.preventDefault();
      var valeur = parseInt($("#valquantite").text());

      $("#nutrition tbody tr").each(function () {
        var valeurOrigin = parseFloat($(this).find("td").eq(2).text().replace(",", "."));
        var newValeur;
        if ($.isNumeric(valeurOrigin) === true) {
          newValeur = valeurOrigin*valeur/100;
          newValeur = Math.ceil(newValeur*1000)/1000;
        } else {
          newValeur = $(this).find("td").eq(1).text();
        }

        $(this).find("td").eq(2).html(newValeur);
      });
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow-x:scroll;;" name="formu">
<table class="table table-striped" id="nutrition">
  <thead>
    <tr>
      <th>Aliments</th>
      <th id="qty">Poids</th>
      <th class="generaux">Energie kJ</th>
      <th class="generaux">Energie kcal</th>
    </thead>
      <tbody class="text-primary">
      <tr><td>Pain au lait, préemballé:</td><td id="valquantite"><strong>35gr</strong></td>
        <td class="generaux" name="">1510</td>
        <td class="generaux">358</td>  
      </tr>
      <tr><td>Total</td>
        <td><strong>50gr</strong></td>
      </tr>
      </tbody>
    </table>
    <input class="btn btn-primary" type="button" value="Calculer" id="calcul" />

Answer 2

The issue may be, we don't know exactly what it is you're trying to calculate or where the data comes from. The valQuantite to which you refer, does that change for each row? If so, why is it defined outside of the each function? If not, why does it refer to a value from the first row of the table?

Doing a little research, you seem to want to take the quantity column and use that along with the energie kJ column to calculate... something. I'd suggest using classes for the three columns, valquantite, energie-kj, and energie-kcal, which you can then use to manipulate the individual columns in a meaningful way. Using $(this).find("td").eq(2).text() is only as good as the coder -- what if the column layout changes? Instead, simply use $(this).find(".energie-kj").text() and you're good.

Now, having gotten to displaying the kj as you'd like (by taking the qty and multiplying it by the kj, then rounding), you can calculate the kCal by dividing that number by 4.1868 and rounding as you'd like.

But note, I've modified your code -- the quantity seems to change with each row, so I've moved valQuantite inside the each statement. Also, I can't stress enough, I've commented my code to the point of silliness. Doing so makes it far easier to track what each line of code is SUPPOSED to be doing, as well as what it's actually doing. And use your console, it is your debugging FRIEND! lol

$(function() {
  // When the button is clicked, calculate the values.
  $("#calcul").click(function(e) {
    // First, make sure the button doesn't submit...
    e.preventDefault();

    // Each row is handled individually, so 
    $("#nutrition > tbody > tr").each(function() {
      // First, get the qty for this row
      var valeur = parseFloat($(this).find(".valquantite").text());
      /****
       * Here is a case. We have hard-wired to use the 
       *  third column of the table for the original val,
       *  but we could also add a class for this col and
       *  reference that: $(this).find(".energie-kj");
       ****/
      var valeurOrigin = parseFloat($(this).find("td").eq(2).text().replace(",", "."));
      var energyKJ, energyKCal;
      // If the energie kJ value is numeric, we do the first
      if ($.isNumeric(valeurOrigin) === true) {
        // calculate some value from the energie kJ and qty,
        energyKJ = valeurOrigin * valeur / 100;
        // 1 kCal = 4.1868 kJ, so do the conversion
        energyKCal = (energyKJ/4.1868).toFixed(2);
        energyKJ = energyKJ.toFixed(2);
      } else {
        // If the energie kJ value is NOT numeric, we simply
        //   set the displayed value to this
        newValeur = $(this).find("td").eq(2).text();
      }
      $(this).find(".energie-kj").text(energyKJ);
      $(this).find(".energie-kcal").text(energyKCal);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow-x:scroll;;" name="formu">
  <table class="table table-striped" id="nutrition">
    <thead>
      <tr>
        <th>Aliments</th>
        <th id="qty">Poids</th>
        <th class="generaux">Energie kJ</th>
        <th class="generaux">Energie kcal</th>
    </thead>
    <tbody class="text-primary" id="">
      <tr>
        <td>Pain au lait, préemballé:</td>
        <td class="valquantite"><strong>35gr</strong></td>
        <td class="generaux energie-kj" name="">1510</td>
        <td class="generaux energie-kcal">358</td>
      </tr>
      <tr>
        <td>Some other thing...:</td>
        <td class="valquantite"><strong>45gr</strong></td>
        <td class="generaux energie-kj" name="">1510</td>
        <td class="generaux energie-kcal">358</td>
      </tr>      <tr>
        <td>Total</td>
        <td><strong>50gr</strong></td>
      </tr>
    </tbody>
  </table>
  <input class="btn btn-primary" type="button" value="Calculer" id="calcul" />