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> /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
Post a Comment