Can't toggle display of table rows in IE with getElementsByName()

I want to show and hide rows of a table based on th开发者_Go百科e value of a select box and this works in Firefox but not IE:

<select onChange="javascript: toggle(this.value);">
 <option value="cat0">category 0</option>
 <option value="cat1">category 1</option>
</select>

<table>
<tr name="cat0">
  <td>some stuff v</td>
  <td>some stuff v</td>
</tr>
<tr name="cat0">
  <td>some stuff d</td>
  <td>some stuff d</td>
</tr>
<tr name="cat1">
  <td>some stuff a</td>
  <td>some stuff a</td>
</tr>
<tr name="cat1">
  <td>some stuff b</td>
  <td>some stuff b</td>
</tr>
</table>
<script type="text/javascript">
function toggle(category)
{
    // turn everything off
    for (var i = 0; i < 2; i++)
    {
        var cat = document.getElementsByName('cat' + i);
        for (var j = 0; j < cat.length; j++)
            cat[j].style.display = 'none';
    }

    // turn on category chosen
    var cat = document.getElementsByName(category);
    for (var i = 0; i < cat.length; i++)
        cat[i].style.display = '';
}
// start by showing cat0
toggle('cat0');
</script>

IE doesn't let you access table rows using the document.getElementsByName method. If you use ID's instead of name's it will work. See this page for code that does just what you are looking for: http://www.toolazy.me.uk/template.php?content=getelementsbyname.xml

With table rows in your second for loop you need to set the display property to table-row

There is actualy an IE bug You can use! Simply set for each element both name and id (both must have same value!). For example: <tr name="cat0" id="cat0"> Now getElementsByName will work in IE too.

ps. I know this is old question, but i was trying to solve this problem 5min ago. So it might help someone :p