Question

I have a table of values. Is it possible with JQuery by clicking on currency link to change value in cells with exchange rates? This static example table

<table border="1">
    <tr>
      <td class="currency">100</td>
      <td class="currency">200</td>
      <td class="current">now in USD</td>
    </tr>
    <tr>
      <td class="currency">150</td>
      <td class="currency">230</td>
    </tr>
    <tr>
      <td class="currency">400</td>
      <td class="currency">200</td>
    </tr>
    <tr>
      <td class="currency">550</td>
      <td class="currency">2920</td>
    </tr>
  </table>

  <a href="#" class="USD">USD</a>
  <a href="#" class="EUR">EUR</a>

Pls look jsfiddle. In other words by clicking on currency values must recalculate them according to rates. In my example on jsfiddle I want to understand how simply change value(for example usd=1 eur=1.3) Thanks!

Answer 1

First of all you need to store the original USD values so you can use those as a base for all exchange rates. A data-x attribute is perfect for this.

$('.currency').each(function() {
    $(this).data('usd-value', $(this).text());
});

You can then simply multiply this value by whatever exchange rate you need, again stored in a data attribute on the link itself. Try this:

<a href="#" class="exchange USD" data-exchangerate="1">USD</a>
<a href="#" class="exchange EUR" data-exchangerate="1.3">EUR</a>
<a href="#" class="exchange GBP" data-exchangerate="0.63">GBP</a>

$(".exchange").click(function() {
    var rate = $(this).data('exchangerate');
    $('.currency').each(function() {
        $(this).text(parseFloat($(this).data('usd-value') * rate));
    });
});

Example fiddle

Note I also added GBP just to show how extensible this method is.