Modifica valore tabella utilizzando jquery

Question

Sto tentando di modificare il valore di un valore td con il pulsante su cui è stato fatto clic. Ho provato un paio di modi ma nessuno ha funzionato. Se l'utente fa clic su Mostra colonna pulsante USD mostra solo valori USD, Se l'utente fa clic su colonna GBP dovrebbe mostrare valori GBP. Non lo so questo è il modo corretto per farlo. Qualsiasi aiuto molto apprezzato.

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

$(".cu-usd").removeClass('hide'); 
 
$(".cu-gbp").addClass('hide'); 
 
$('.btn-usd').on('click', function(){ 
 
    \t $(".cu-usd").removeClass('hide'); 
 
    \t $(".cu-gbp").addClass('hide'); 
 
    }); 
 
    $('.btn-gbp').on('click', function(){ 
 
    \t $(".cu-gbp").removeClass('hide'); 
 
    \t $(".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> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table> 
 
    <table> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table>

Answer 2

Ci sono 2 problemi

1. selettore di classe inizia con .
2. nascondere è una stringa deve essere tra virgolette

seguito funzionerà

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

mancante . in nome della classe

Answer 4

Ci sono alcuni problemi con il vostro codice.

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

Usa . operatore per l'elemento di classe e avvolgere nascondere tra virgolette in quanto è passato come stringa.

Anche per ottimizzare estrarre $(".cu-usd") e $(".cu-gbp") in variabili.

Answer 5

Si può anche farlo con .hide() e .show() e non hanno per assegnare una classe. Il risultato è lo stesso.

e come accennato prima manca . in nomenclatura. Ma penso che tu lo sappia ormai.

$('.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> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table> 
 
    <table> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table>