循环中的Jquery执行一些记录计算

Question

Iam trying to bring some records using php and do some calculations. What iam doing now is that, each rows is having a dropdown with different currencies. When i select each currency, it calculates and shows certain values. Till here its working fine.

What i am trying to achieve is that if i select first currency dropdown, it should calculate the complete records calculations instead of selecting the currency of each rows. I guess i need to do some kind of loop in the jquery which calculates the rows.

Fiddle

Following is the part of jquery script for the currency dropdown.

$(window).load(function() {
  $(document).ready(function() {
    $("select").on('change', function() {

      var dept_number = $(this).val();
      var price = $(this).find(':selected').data('price');
      var selected = $(this).find('option:selected').text();

      if (selected == "INR") {
        $(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
      } else {
        $(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
      }

      $(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));

    });
  });
});

i guess i need to add some loops here in this jquery. Anyone to guide me how to do this. Or i need to follow a different step.

This is what i have tried as per the suggestion from Leonix.

$(document).ready(function(){
            $(this).closest('table').find("select").each(function() {
               var dept_number = $(this).val();
               var price = $(this).find(':selected').data('price');

                var selected = $(this).find("select");

           if(selected=="INR")
            {
               $(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());

            } else
            {

           $(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
           }

               $(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val()/$(this).closest('table').find('.qty').val()).toFixed(3));

           });
           });

Answer 1

In your select change function, do a each for all rows of your table and find the dropdown:

$(this).closest('table').find("select").each(function() {
    /* Each SELECT here, use $(this) */
})

or, depending of your needs :

$(this).closest('table').find("select").each(function() {
    /* Each TR here, use selectInput */
    var selectInput = $(this).find("select");
})

With the select in hands, use selectInput.val(changedSelectInput.val()) changedSelectInput is the jquery object containing the select who changed.
Using nested anonymous functions, take care, they are executed in the object context, so this and $(this) change depending on the object affected by function.

Advice: Use specific css classes for JS, as select.select-currency instead of select only, put these classes in your code. it will prevent so many mistakes and will save your time.

Note: currency_change[] is not a valid ID, if you dont need to set one, dont.

EDIT

Some code: https://jsfiddle.net/btpxq5ow/6/
What I did ?

1. Fix tags issues
2. Fix input in tbody issues, NEVER put it in a tr, tbody, table directly.
3. Fix some indentation issues
4. Apply the currency change to all rows
5. Prevent change event to call itself in an infinite loop
6. Apply calculation to all rows when they are updated
7. Fix some code syntax & performance issues

Please check your calculation are right since i modified it, see calculateRowTotals().
There are still a few html/js errorsthat must be fixed.

You will rarely get code from stackoverflow