How to get multiple table rows to appear/dissapear using onchange

I have an option in my form which if the user answer yes would then display a divved area.

However I have changed my layout etc and because my form deals with statistical data I thought I would use some tables for some parts.

So I was wondering how I would get three table rows to append to a table using onchange function.

However the getelementbyID only works with one element so only one of my rows is displayed.

Here is what code I have so far:

 <table>
      <tr>
      <th>
    <select name="dosage" id="dosage" style="display:block;" onchange="document.getElement开发者_Go百科ById('dosagearea').style.display = this.options.selectedIndex ? 'block' : 'none'">
     </th>
     </tr>


    <?php
//this code generates input fields using codeigntier
                                echo '<tr id="dosagearea">', '<td>', form_label('Emitted µmGy','dosage_emitted'), '</td>', '<td>', form_input ('dosage_emitted', set_value('dosage_emitted')) ,'</td>', '</tr>';
                                echo '<tr id="dosagearea">', '<td>', form_label('Absorbed mGy2','dosage_absorbed'), '</td>', '<td>', form_input ('dosage_absorbed', set_value('dosage_absorbed')) ,'</td>', '</tr>';
                                echo '<tr id="dosagearea">', '<td>', form_label('Dosage Period (mins)','dosage_time'), '</td>', '<td>', form_input ('dosage_time', set_value('dosage_period')), '</td>', '</tr>';
                        ?>

    </table>

Any suggestions?

Thanks

you really don't want to have multiple elements with he same id (id should be unique). You could use class instead. My expertise is with jquery which would make this a snap, but there are functions that implement "getelementbyclass" behavior you could use

Dont use getElementById, use getElementByClassName, because multiple elements can have the same class name. And to make sure it works in IE, add this:

document.getElementsByClassName = function(class_name)
{
    var all = this.getElementsByTagName('*');
    var matchArray = new Array();
    var re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");
    for (var i = 0, l = all.length; i < l; i++)
    {
        if (re.test(all[i].className))
            matchArray.push(all[i]);
    }
    return matchArray;
}

    <select name="dosage" id="dosage" style="display:block;" onchange="toggleShowHide(this.options.selectedIndex, ['id1', 'id2', 'id3']);">

<script type="text/javascript">
function toggleShowHide(idx, arrIDs) {
    var display = idx ? 'block' : 'none';
    for(var x=0; x<arrIDs.length; x++)
        document.getElementById(arrIDs[x]).style.display = display;
}
</script>