使用jquery更改表值

Question

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> 

Answer 1

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");
    });

Answer 2

 $(".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> 

Answer 3

 $('.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

Answer 4

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.

Answer 5

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>