Geek Answers Handbook

Change table value with jquery

I am trying to change the td value by pressing a button. I tried several ways, but no one worked. If the user clicks the Show USD button, only USD values ​​are displayed if the user GBP column should show GBP values. I do not know that this is the right way to do this. Any help is much 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>
+5
source share
5 answers

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

There are 2 problems

  • The class selector begins with .
  • hide - the string must be in quotation marks

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

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

Is missing . in class name

+1
source

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 an operator . for the class element and end the quotation mark as it is passed as a string.

Also, to optimize, print $(".cu-usd") and $(".cu-gbp") in variables.

+1
source

You can also do this with .hide() and .show() and should not assign a class. The result is the same.

and, as already mentioned, before the absence . in classname. But I think you know that.

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

More articles:


All Articles