javascript - Using jquery to show/hide several table rows -


i trying create table of periods , prices.

the table header includes select change currencies. table rows below shows different periods , prices. prices can shown according currency selected in select.

i new jquery, have been fiddling around , looked through many posts here, lot of have helped me far!

but, have added second row table , price changes in first row, not second.

i appreciate guys can give.

javascript:

<script type="text/javascript"> function currencycheck() { var option = document.getelementbyid("currency-select").value;     if (option == "euro") {         document.getelementbyid("eur").style.display ="";         document.getelementbyid("gbp").style.display ="none";         document.getelementbyid("dkk").style.display ="none";     }     if (option == "gbpound") {         document.getelementbyid("gbp").style.display ="";         document.getelementbyid("eur").style.display ="none";         document.getelementbyid("dkk").style.display ="none";     }     if (option == "dkkroner") {         document.getelementbyid("dkk").style.display ="";         document.getelementbyid("eur").style.display ="none";         document.getelementbyid("gbp").style.display ="none";     } } </script> 

html:

   <table class="rates"> <thead> <tr>     <th>         period     </th>     <th>         <select style="width:100px;" id="currency-select" onchange="currencycheck()">             <option selected="selected" value="euro">eur</option>             <option value="gbpound">gbp</option>             <option value="dkkroner">dkk</option>         </select>         &nbsp;/week     </th> </tr> </thead> <tbody> <tr class="odd">     <td class="dates">         january     </td>     <td>         <div class="cost">             <div id="eur">                 €500             </div>             <div id="gbp" style="display:none">                 £350             </div>             <div id="dkk" style="display:none">                 dkk 1500             </div>         </div>     </td> </tr> <tr class="even">     <td class="dates">         february     </td>     <td>         <div class="cost">             <div id="eur">                 €500             </div>             <div id="gbp" style="display:none">                 £350             </div>             <div id="dkk" style="display:none">                 dkk 1500             </div>         </div>     </td> </tr> </tbody> </table> 

ids supposed unique identifiers, document.getelementbyid(), returning first instance since should one. change ids class, , use document.getelementbyclassname() instead.


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -