5

I am trying to change the value of an td value with the button that is clicked.. I have tried a couple of ways but none have worked. If user click Show USD button column show only USD values, If user click GBP column should show GBP values. I don't know this this is correct way to do this. Any help highly appreciated. 

$('.btn-usd').on('click', function(){
    $("cu-usd").removeClass(hide);
    $("cu-gbp").addClass(hide);
});
$('.btn-gbp').on('click', function(){
    $("cu-gbp").removeClass(hide);
    $("cu-usd").addClass(hide);
});
.hide {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>
<table>
    <tbody>
        <tr> 
            <td>
                <div class="cu-usd">$10</div>
                <div class="cu-gbp">£7.10</div>
            </td>
            <td>
                <div class="cu-usd">$20</div>
                <div class="cu-gbp">£14.20</div>
            </td>
            <td>
                <div class="cu-usd">$30</div>
                <div class="cu-gbp">£21.30</div>
            </td>
            <td>
                <div class="cu-usd">$40</div>
                <div class="cu-gbp">£28.10</div>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr> 
            <td>
                <div class="cu-usd">$100</div>
                <div class="cu-gbp">£70.10</div>
            </td>
            <td>
                <div class="cu-usd">$200</div>
                <div class="cu-gbp">£140.20</div>
            </td>
            <td>
                <div class="cu-usd">$300</div>
                <div class="cu-gbp">£210.30</div>
            </td>
            <td>
                <div class="cu-usd">$400</div>
                <div class="cu-gbp">£280.10</div>
            </td>
        </tr>
    </tbody>
</table>
Mohammad
  • 21,175
  • 15
  • 55
  • 84
techies
  • 181
  • 2
  • 13

5 Answers5

4

There are 2 problems

  1. Class selector starts with .
  2. hide is a string must be in quotes

Following will work

 $('.btn-usd').on('click', function(){
        $(".cu-usd").removeClass("hide");
        $(".cu-gbp").addClass("hide");
    });
    $('.btn-gbp').on('click', function(){
        $(".cu-gbp").removeClass("hide");
        $(".cu-usd").addClass("hide");
    });
Nikhil Aggarwal
  • 28,197
  • 4
  • 43
  • 59
3

$(".cu-usd").removeClass('hide');
$(".cu-gbp").addClass('hide');
$('.btn-usd').on('click', function(){
     $(".cu-usd").removeClass('hide');
     $(".cu-gbp").addClass('hide');
    });
    $('.btn-gbp').on('click', function(){
     $(".cu-gbp").removeClass('hide');
     $(".cu-usd").addClass('hide');
    });
.hide {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
    <div class="btn-gbp">show GBP</div>
    
    
    <table>
     <tbody>
      <tr> 
       <td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td>
       <td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td>
       <td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td>
       <td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td>
      </tr>
     </tbody>
    </table>
    <table>
     <tbody>
      <tr> 
       <td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td>
       <td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td>
       <td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td>
       <td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td>
      </tr>
     </tbody>
    </table>
1

$('.btn-usd').on('click', function() {

  $(".cu-usd").removeClass('hide');//missing .
  $(".cu-gbp").addClass('hide');//missing .
});
$('.btn-gbp').on('click', function() {
  $(".cu-gbp").removeClass('hide');//missing .
  $(".cu-usd").addClass('hide');//missing .
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>


<table>
  <tbody>
    <tr>
      <td>
        <div class="cu-usd">$10</div>
        <div class="cu-gbp">£7.10</div>
      </td>
      <td>
        <div class="cu-usd">$20</div>
        <div class="cu-gbp">£14.20</div>
      </td>
      <td>
        <div class="cu-usd">$30</div>
        <div class="cu-gbp">£21.30</div>
      </td>
      <td>
        <div class="cu-usd">$40</div>
        <div class="cu-gbp">£28.10</div>
      </td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>
        <div class="cu-usd">$100</div>
        <div class="cu-gbp">£70.10</div>
      </td>
      <td>
        <div class="cu-usd">$200</div>
        <div class="cu-gbp">£140.20</div>
      </td>
      <td>
        <div class="cu-usd">$300</div>
        <div class="cu-gbp">£210.30</div>
      </td>
      <td>
        <div class="cu-usd">$400</div>
        <div class="cu-gbp">£280.10</div>
      </td>
    </tr>
  </tbody>
</table>

Missing . in class name

guradio
  • 15,524
  • 4
  • 36
  • 57
  • You can also use the `.hide() and .show()` @techies [like this](http://stackoverflow.com/questions/37966176/change-table-value-using-jquery/37966406#37966406) – Angel ofDemons Jun 22 '16 at 11:17
1

There are some problems with your code.

$('.btn-usd').on('click', function(){
  $(".cu-usd").removeClass('hide');
  $(".cu-gbp").addClass('hide');
});
$('.btn-gbp').on('click', function(){
 $(".cu-gbp").removeClass('hide');
 $(".cu-usd").addClass('hide');
});

Use . operator for class element and wrap hide in quotes as it is passed as string.

Also to optimize take out $(".cu-usd") and $(".cu-gbp") in variables.

Saiyam Gambhir
  • 536
  • 3
  • 16
1

You can also do it with .hide() and .show() and don't have to assign a class. The result is the same.

and as mentioned before missing . in classname. But I think that you know that by now. 

 $('.btn-usd').on('click', function(){
        $(".cu-usd").show();
        $(".cu-gbp").hide();
       });
    $('.btn-gbp').on('click', function(){
        $(".cu-gbp").show();
        $(".cu-usd").hide();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>
    <table>
     <tbody>
      <tr> 
       <td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td>
       <td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td>
       <td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td>
       <td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td>
      </tr>
     </tbody>
    </table>
    <table>
     <tbody>
      <tr> 
       <td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td>
       <td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td>
       <td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td>
       <td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td>
      </tr>
     </tbody>
    </table>
Angel ofDemons
  • 1,267
  • 8
  • 13