使用jQuery显示/隐藏多个表行

Question

I am trying to create a table of periods and prices.

The table header includes a select to change currencies. The table rows below this shows different periods and prices. The prices can be shown according to the currency selected in select.

I am new to jQuery, but have been fiddling around and looked through many posts here, a lot of which have helped me to get this far!

But, I have now added a second row to my table and the price only changes in the first row, not the second.

I appreciate any help you 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>

Answer 1

Ids are supposed to be unique identifiers, so document.getElementById() , is only returning the first instance since their should only be one. Change the ids to a class, and use document.getElementByClassName() instead.

Answer 2

Because you are changing the element with id "GBP", or so. By using getElementById you are only changing one elements behaviour. You should assign a class to all elements like:

<div class="GBP">£350</div>

After that you get all elements with class name GBP and you loop through them doing whatever you want:

var elems = document.getElementsByClassName('GBP');
for(var i=0; i < elems.length; i++) { 
    elems[i].style.display='block'
}

Answer 3

    <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 class="EUR">€500</div>
                    <div class="GBP" style="display:none">£350</div>
                    <div class="DKK" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="dates">February</td>
            <td>
                <div class="cost">
                    <div class="EUR">€500</div>
                    <div class="GBP" style="display:none">£350</div>
                    <div class="DKK" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Script

    function currencyCheck() {
    var option = document.getElementById("currency-select").value;
    var elems1 = document.getElementsByClassName('EUR');
    for (var i = 0; i < elems1.length; i++) {
        elems1[i].style.display = (option == 'EURO' ? 'block' : 'none');
    }
    var elems2 = document.getElementsByClassName('GBP');
    for (var i = 0; i < elems2.length; i++) {
        elems2[i].style.display = (option == 'GBPOUND' ? 'block' : 'none');
    }
    var elems3 = document.getElementsByClassName('DKK');
    for (var i = 0; i < elems3.length; i++) {
        elems3[i].style.display = (option == 'DKKRONER' ? 'block' : 'none');
    }
}

Answer 4

A better solution would be to use the same class names for the cost divs as the option values, and then use this :

jQuery :

function currencyCheck() {
    var option = $("#currency-select").val();
    $('.cost>div').hide();
    $('.' + option).show();
}

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 class="EURO">€500</div>
                    <div class="GBPOUND" style="display:none">£350</div>
                    <div class="DKKRONER" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="dates">February</td>
            <td>
                <div class="cost">
                    <div class="EURO">€500</div>
                    <div class="GBPOUND" style="display:none">£350</div>
                    <div class="DKKRONER" style="display:none">DKK 1500</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

DEMO : JSFiddle